pal 



Learn HTML the quick and easy way, 




• • • • 



HTML 

and CSS 

with w3schools 



Create Web 
pages 

Format text 

Apply styles 

Add tables & lists 

Format with CSS 

Link pages 

Build forms 




VVJScnci&.i Chi it 



i Online Ac I? T4.t0r.nl* 



tu35chooIs.com 



J 




Full Web Building Tutorials 



HTML TutoTinlv 
LC*m HTML 

Htm CSS 



Web Building 
TUTORIALS 



1 HTML tfii XHTML 



.-■'■Jin JavaScript 
"i iiThl Com 
Lcam DHTHL 

.V>rn YBStMpt 



Le«rn XML 
l^earn DTO 

XML MM 
beam xslt 

learn XSL- FO 
. . ,-< n XPelh 
learn XQoer* 
-«i n XUnk 
Ljcirn XPointer 
L«brn Schema 
Learn XFoi mt 

, , sorting 

.-ii n SQL 
Lcirn ASP 
Lemn ACQ 

.ram PHP 

'let f 



_Wet>S 
V*/n Web Servic.es 



• SQL »oa CWtbtM 



m Try-it- yourself 
Iff EXAMPLES 

• ThDusaniB □! Example* 

• OflrlltM Tent ErJJter 

- T«t tJ*e En&mplf S. T4UTHI 
A £idpgrSfn«n( «.ih the CfKlC 

• Cut a>f*d Paste 



web Buildirtg 
REFERENCES 



• 411 HTML Tarji «nd AHr ifrutM 
4 Foil C5S CO Uid 1.0 

« Jav ascript artd KJH 

* PHPanafSP 

« Colors artd Ch»t*ctcr 5«ti 



*s Web Developers 
J CERTIFICATES 

1 HTML CertSficaSKin 



Quick and Easy Learning 

&C<ag;« time it valuable, me: fjg|k«f quick anrj c»y learning. 

« WJSdnwH,, yeu «i rtwdy ovefymifin yen nwd to Iwn, In an actcssibic- Ann handy format 



Where to Start 

Wrial dr»l a Web den cope, OCCO to l^ii"* -1 



BfiSfW?:!::::::' 



Learn 

HTML 

and CSS 

with w3schools 

Hege Refsnes, Stale Refsnes, Kai Jim Refsnes, 
Jan Egil Refsnes with C. Michael Woodward 




WILEY 

Wiley Publishing, Inc. 



Learn HTML and CSS with w3schools 



Published by 

Wiley Publishing, Inc. 

Ill River Street 

Hoboken, NJ 07030-5774 

www.wiley.com 

Copyright © 2010 by Wiley Publishing, Inc., Indianapolis, Indiana 
Published simultaneously in Canada 
ISBN: 978-0-470-61195-1 
LOC/CIP: 2010924594 

Manufactured in the United States of America 
10 9 8 76 5432 1 

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form 
or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as 
permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior 
written permission of the Publisher, or authorization through payment of the appropriate per-copy fee 
to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax 
(978) 646-8600. Requests to the Publisher for permission should be addressed to the Legal Department, 
Permission Department, John Wiley & Sons, Inc., 1 1 1 River Street, Hoboken, NJ 07030, (201) 748- 
6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions. 

Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or 
warranties with respect to the accuracy or completeness of the contents of this work and specifically 
disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No 
warranty may be created or extended by sales or promotional materials. The advice and strategies con- 
tained herein may not be suitable for every situation. This work is sold with the understanding that the 
publisher is not engaged in rendering legal, accounting, or other professional services. If professional 
assistance is required, the services of a competent professional person should be sought. Neither the 
publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or 
Website is referred to in this work as a citation and/or a potential source of further information does 
not mean that the author or the publisher endorses the information the organization or Website may 
provide or recommendations it may make. Further, readers should be aware that Internet Websites listed 
in this work may have changed or disappeared between when this work was written and when it is read. 

For general information on our other products and services please contact our Customer Care Depart- 
ment within the United States at (877) 762-2974, outside the United States at (317) 572-3993 or fax 
(317) 572-4002. 

Trademarks: Wiley, the Wiley logo, and related trade dress are trademarks or registered trademarks 
of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not 
be used without written permission. w3schools and the w3schools logo are registered trademarks of 
w3schools. All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is 
not associated with any product or vendor mentioned in this book. 

Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may 
not be available in electronic books. 

Library of Congress CIP Data is available from the publisher. 



w3schools Authors/Editors 

w3schools' mission is to publish well-organized and easy-to-understand online 
tutorials based on the W3C Web standards. 

Hege Refsnes 

Hege is a writer and editor for w3 schools. She works to improve the usability and 
accessibility of the Web. 

Hege has been writing tutorials for w3schools since 1998. 

Stale Refsnes 

Stale has ten years of Internet development experience, developing all the Web- 
based solutions for The Norwegian Handball Federation. 

Stale has been writing tutorials for w3schools since 1999. 

Kai Jim Refsnes 

Kai Jim has been around computers since childhood, working with them since the 
age of 14. 

He has been writing tutorials for w3 schools since completing a bachelor's degree in 
information technology in 2005. 

Jan Egil Refsnes 

Jan Egil is the president and founder of w3schools. 

He is a senior system developer with a master's degree in information technology 
and more than 30 years of computing experience. 

"Jani" has supervised a large number of company-critical development projects 
for oil companies like Amoco, British Petroleum, ELF, Halliburton, and Brown & 
Root. He has also developed computer-based solutions for more than 20 govern- 
mental institutions like The National Library, Norwegian High Schools, The State 
Hospital, and many others. 

Jani started w3schools in 1998. 



Credits 



Acquisitions Editor 

Scott Meyers 

Production 

Abshier House 

Copy Editor 

Abshier House 

Associate Director of Marketing 

David Mayhew 

Production Manager 

Tim Tate 

Proofreading and Indexing 

Abshier House 



Vice President and Executive 
Group Publisher 

Richard Swadley 

Vice President and Executive 
Publisher 

Barry Pruett 

Associate Publisher 

Jim Minatel 

Project Coordinator, Cover 

Lynsey Stanford 

Cover Designer 

Michael Trent 



TABLE OF CONTENTS 



Section I: HTML Basic 5 

CHAPTER1: HTML Getting Started 7 

What You Need 7 

HTML Editors 7 

Create Your Own Test Web 8 

.HTM or .HTML Extension? 8 

CHAPTER 2: HTML Fundamentals 9 

HTML Headings 9 

HTML Paragraphs 10 

HTML Links 11 

HTML Images 11 

CHAPTER 3: HTML Elements 13 

HTML Elements 13 

HTML Element Syntax 13 

Nested Elements 14 

Don't Forget the End Tag 15 

Empty HTML Elements 16 

Use Lowercase Tags 16 

CHAPTER 4: HTML Attributes 17 

Standard HTML Attributes 17 

Defining Attribute Values 17 

HTML Attributes Reference 18 

CHAPTER 5: HTML Headings, Rules, & Comments 19 

HTML Headings 19 

HTML Rules (Lines) 20 

HTML Comments 21 

Viewing HTML Source Code 22 

HTML Tag reference 22 



V 



Table of Contents 

CHAPTER 6: HTML Paragraphs 23 

HTML Paragraphs 23 

HTML Line Breaks 24 

HTML Output Tips 24 

Complete Tag reference 26 

CHAPTER 7 HTML Text Formatting 27 

HTML Formatting Tags 27 

Text Formatting 28 

Preformatted Text 29 

"Computer Output" Tags 30 

Address 31 

Abbreviations and Acronyms 32 

Text Direction 33 

Quotations 34 

Deleted and Inserted Text 35 

Text Formatting Tags 36 

CHAPTER 8: HTML Styles 39 

The HTML Style Attribute 39 

Deprecated Tags and Attributes 40 

Common HTML Styles 41 

Complete Tag reference 44 

CHAPTER 9: html Links 45 

HTML Links 45 

Open a Link in a New Browser Window 46 

Hyperlinks, Anchors, and Links 47 

HTML Link Syntax 47 

Links on the Same Page 50 

Creating a mail to: Link 52 

Creating an Image Link 54 

CHAPTER 10: html Images 55 

img Tag and the src Attribute 55 

Insert Images from Different Locations 57 

Background Images 58 

Aligning Images 59 

Floating Images 61 



VI 



Table of Contents 



Adjusting Image Sizes 62 

alt Attribute 63 

Creating an Image Map 63 

CHAPTER 11: HTML Tables 65 

Creating HTML Tables 65 

Table Borders 68 

Table with No Border 70 

Headings in a Table 71 

Table with a Caption 74 

Cells Spanning Multiple Columns 75 

Tags Inside a Table 76 

Cell Padding 78 

Cell Spacing 79 

Table Background Colors and Images 80 

Cell Background Colors and Images 82 

Frame Attribute 84 

Using frame and border to Control Table Borders 88 

CHAPTER 12: html Lists 90 

Unordered Lists 90 

Ordered Lists 93 

Definition Lists 95 

Nested Lists 96 

CHAPTER13: HTML Forms & Input 99 

Forms 99 

Input Tag and Attributes 100 

Action Attribute 106 

Form Examples 106 

CHAPTER 14: html Color in 

Color Values Ill 

16 Million Different Colors 1 12 

Web Standard Color Names 113 

Color Names Supported by All Browsers 113 

Web Safe Colors? 114 

Shades of Gray 114 

VII 



Table of Contents 

CHAPTER 15: HTML 4.01 Quick List 116 

HTML Basic Document 116 

Heading Elements 116 

Text Elements 116 

Logical Styles 117 

Physical Styles 117 

Links, Anchors, and Image Elements 117 

Unordered (Bulleted) List 117 

Ordered (Numbered) List 117 

Definition list 118 

Tables 118 

Frames 118 

Forms 118 

Entities 119 

Other Elements 1 1 9 

Section II: HTML/CSS Advanced 121 

CHAPTER 16: HTML Layout 123 

HTML Layout Using Tables 123 

CHAPTER 17: HTML Frames 125 

frameset Tag 125 

frame Tag 127 

Designing with Frames 128 

CHAPTER 18: HTML Fonts 136 

font Tag 136 

Font Attributes 137 

Controlling Fonts with Styles 137 

CHAPTER 19: Why Use HTML 4.0? 140 

HTML 3.2 Was Very Wrong! 140 

Enter HTML 4.0 140 



VIII 



Table of Contents 



CHAPTER 20: HTML CSS Styles 142 

Styles in HTML 142 

How to Use Styles 144 

Style Tags 146 

CHAPTER21: HTML Character Entities 147 

Character Entities 147 

Nonbreaking Space 148 

Commonly Used Character Entities 149 

CHAPTER 22: HTML Head & Meta Elements 150 

Head Element 150 

Meta Element 153 

CHAPTER 23: HTML Uniform Resource Locators 157 

Uniform Resource Locator (URL) 157 

URL Schemes 158 

Using Links 159 

CHAPTER 24: HTML Scripts 160 

Insert a Script into a Page 160 

How to Handle Older Browsers 161 

noscript Tag 162 

Script Tags 162 

CHAPTER25: HTML Standard Attributes 163 

Core Attributes 163 

Language Attributes 163 

Keyboard Attributes 1 64 

CHAPTER 26: HTML Event Attributes 165 

Window Events 165 

Form Element Events 166 

Keyboard Events 166 

Mouse Events 166 

CHAPTER 27: HTML URL Encoding 167 

URL Encoding 167 

Common URL Encoding Characters 168 



IX 



Table of Contents 

C H A PT E R 28 : Turn Your PC Into a Web Server 169 

Your Windows PC as a Web Server 169 

Installing IIS on Windows Vista and Windows 7 170 

Installing IIS on Windows XP and Windows 2000 171 

Testing your Web 171 

Your Next Step: A Professional Web Server 172 

CHAPTER 29: HTML and CSS Summary 173 

Section III: Appendixes 175 

APPENDIX A: HTML 4.01 l.O Reference 177 

APPENDIX B: HTML Standard Attributes 185 

APPENDIX C: HTML Standard Event Attributes 187 

APPENDIX D: HTML Elements and Valid Doctypes 189 

APPENDIX E: HTML Character Sets 193 

APPENDIX F: HTML ASCII Reference 196 

APPENDIX G: HTMLiSO-8859-1 Reference 201 

APPENDIX H: Symbol Entities Reference 207 

APPENDIX I : HTML URL Encoding Reference 213 



X 



INTRODUCTION 



Welcome to Learn HTML and CSS with w3schools. This book is for Web users learn- 
ing to create their own Web pages using HTML, the standard tagging language for 
the World Wide Web. 

w3schools (www.w3schools.com) is one of the top Web destinations to learn HMTL and 
many other key Web languages. w3 schools' tutorials are recommended reading in more 
than 100 universities and high schools all over the world. This book is a great companion 
to the HTML and CSS tutorials on the w3 schools site, which were written by Hege Ref- 
snes, Stale Refsnes, Kai Jim Refsnes, and Jan Egil Refsnes. 

Like the w3schools online tutorials, this book features a brief presentation of each topic, 
trading lengthy explanations for abundant examples showcasing each key feature. This 
book, as well as other w3schools books published by Wiley, features straightforward and 
concise tutorials on each topic from which the beginning Web developer can easily learn. 
All of the book's content is derived from w3schools' accurate, user-tested content used by 
millions of learners every month. 

HTML 

With HTML, you can create your own Web site. HTML is the core technology in which 
all Web pages are written. This tutorial teaches you everything about HTML. HTML is 
easy to learn — you will enjoy it. 

What You Should Already Know 

Before you continue, you should have a basic understanding of how to use a browser to 
view pages on the Web. 

If you want to study these subjects first, please read The Lnternet For Dummies, 12th Edi- 
tion, also from Wiley Publishing. 

What is HTML? 

HTML is a language for describing Web pages. 

HTML stands for HyperText Markup Language. 

HTML is not a programming language, it is a markup language. 

A markup language is a collection of markup tags. 

HTML uses markup tags to describe Web pages. 

i 
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What are Tags? 

HTML markup tags are usually called HTML tags or just tags. 
HTML tags are keywords surrounded by angle brackets like <html>. 
HTML tags normally come in pairs, like <b> and </b>. 
The first tag in a pair is the start tag; the second tag is the end tag. 
Start and end tags are also called opening tags and closing tags. 

HTML Documents = Web Pages 

HTML documents describe Web pages. 

HTML documents contain HTML tags and plain text. 

HTML documents are also called Web pages. 

The purpose of a Web browser (like Internet Explorer or Mozilla Firefox) is to read 
HTML documents and display them as Web pages. The browser does not display 
the HTML tags, but uses the tags to interpret the content of the page. In your 
browser, it looks like figure LI. 



<html> 
<body> 

<hl>My First Headi ng</hl> 

<p>My first paragraph</p> 

</body> 
</html> 

In the previous code example, 

The text between <html > and </html > describes the Web page. 
The text between <body> and </body> is the visible page content. 
The text between <hl> and </hl> is displayed as a heading. 
The text between <p> and </ p> is displayed as a paragraph. 

My First Heading 

My feU pu^pqjli 



Figure 1.1 
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How to Use This Book 

Throughout this book, you will see several icons: 



Try it yourself » 



The Try It Yourself icon indicates an opportunity for you to practice what you've just 
learned. The code and examples under this icon come from examples on the w3schools 
site, which allow you to make changes to the code and see the results immediately You do 
not have to type the code examples in this book; you can find them all on the w3 schools 



The w3 schools icon indicates that more information is available on the 
w3schools site. 

i \ This icon indicates where you will find further information about a topic that 

^ is covered more thoroughly elsewhere within the book. 




NOTE 



Notes call your attention to important information you need to know 
before proceeding. 



TIP 



Tips provide you with suggested shortcuts and information to help you be 
more productive. 



This book is divided into three sections: 

Section I: HTML Basic 

Section II: HTML/CSS Advanced 

Section III: Appendixes 

If you're eager to improve your Web pages and to add some interactivity, jump right 
in with HTML basics. Plenty of examples and opportunities to try things await, and 
w3schools will be right there when you need them! 
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CHAPTER 1 

HTML 

GETTING STARTED 



In This Chapter 

□ What You Need 

□ HTML Editors 

□ Create Your Own Test Web 

□ .HTM or .HTML Extension? 



What You Need 

It's simple to get started writing HTML. 

You don't need any tools to learn HTML with w3schools. 
You don't need an HTML editor. 
You don't need a Web server. 
You don't need a Web site. 



HTML Editors 

In this tutorial, we use a plain text editor (like Notepad) to edit HTML. We believe 
this is the best way to learn HTML. 

Instead of writing plain text, however, professional Web developers often prefer using 
HTML editors like FrontPage or Dreamweaver because they offer code-writing 
shortcuts and helpful features. 
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Create Your Own Test Web 

We suggest you experiment with everything you learn in this book by editing your 
Web files with a text editor (like Notepad) and opening them in Internet Explorer 
to view the results. 

To create a test Web on your own computer, just copy the following three files from 
the w3schools Web site to your desktop. 

Ehttp : / / www. w3 schools . com/html/ mainpage .htm 
http : / / www. w3schools . com/html/ page 1 . htm 
http://www.w3schools.com/html/page2.htm 

After you have copied the files, double-click on the file called mainpage.htm and see 
your first Web site in action. 

If your test Web contains HTML markup tags you have not learned, don't 
panic. 

You will learn all about markup tags in the next chapters. 

.HTM or .HTML Extension? 

When you save an HTML file, you can use either the .htm or the .html extension. 
We use .htm in our examples. It is a habit from the past, when the software only 
allowed three letters in file extensions. 

In most cases, it is perfectly safe to use .html. 

EThe w3 schools Web site contains a wealth of helpful tools to help you 
learn HTML, including hundreds of cut-and-paste examples, an online 
text editor, an HTML Color Picker, quizzes to test your knowledge, and 
an abundance of Web-building reference tables. We recommend you 
refer to the Web site often as you work through this book, http: //www. 
w3 schools . com/ html 
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CHAPTER 2 

HTML 
FUNDAMENTALS 



In This Chapter 

□ HTML Headings 

□ HTML Paragraphs 

□ HTML Links 

□ HTML Images 

HTML Headings 

HTML headings are defined with the <hl> to <h6> tags. The lower the number, 
the larger the heading size, as shown in Figure 2.1. 

Don't worry if the examples use tags you have not learned. You will learn 
more about tags in the next chapters. 



Try it yourself » 



<html> 
<body> 

<hl>This is Heading l</hl> 

<h2>Heading 2 is Small er</h2> 

<h3>Heading 3 is Smaller Still</h3> 

</body> 
</html> 

(continued) 
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(continued) 

This is Heading 1 

Heading 2 is Smaller 
Heading 3 is Smaller Still 

Figure 2.1 



HTML Paragraphs 

HTML paragraphs are defined with the <p> tag. Most browsers automatically put 
a line break and space after a </p> tag, as shown in Figure 2.2. 



Try it yourself » 



<html> 
<body> 

<p>This is a paragraph . </p> 
<p>This is a paragraph . </p> 
<p>This is a paragraph . </p> 

</body> 
</html> 

This is a paragraph. 
This is a paragraph. 
This is a paragraph. 

Figure 2.2 
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HTML Links 

HTML links are defined with the <a> tag, as shown in Figure 2.3. 



Try it yourself » 



<html> 
<body> 

<a href="http ://www. w3school s . com">Thi s is a link to the 
w3schools web site.</a> 

</body> 
</html> 



This is a link to the \v 3 schools Web site. 



Figure 2.3 



The URL address is an attribute of the link element. You will learn about 
attributes in Chapter 4, HTML Attributes. 

HTML Images 

HTML images are defined with the <i mg> tag. It tells the browser where to find the 
image file and what size to display it, among other things. The results of this code 
example are shown in Figure 2.4. 



Try it yourself » 



<html> 
<body> 

<img src="w3schools. jpg" wi dth= ,, 104" hei ght= ,, 142" /> 

</body> 
</html> 



11 



Learn HTML and CSS with w3schools 




Figure 2.4 



f 1 K The source name and size of the image are attributes of the image element. 

\s You will learn about attributes in Chapter 4, "HTML Attributes." 
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CHAPTER 3 

HTML ELEMENTS 



In This Chapter 

□ HTML Elements 

□ HTML Element Syntax 

□ Nested Elements 

□ Don't Forget the End Tag 

□ Empty HTML Elements 

□ Use Lowercase Tags 



HTML Elements 



HTML documents are defined by HTML elements. An HTML element is every- 
thing between the start tag and the end tag. The start tag is often called the opening 
tag. The end tag is often called the closing tag. 



OPENING TAG 


ELEMENT CONTENT 


CLOSING TAG 


<P> 


This is a paragraph. 


</p> 


<a href="default.htm"> 


This is a link. 


</a> 


<br/> 







HTML Element Syntax 

HTML elements follow a certain format regardless of how the element is used. 
An HTML element starts with a start tag/opening tag. 
An HTML element ends with an end tag/closing tag. 
The element content is everything between the start and the end tag. 
Some HTML elements have empty content. 
Empty elements are closed in the start tag. 
Most HTML elements can have attributes. 

You will learn more about attributes in Chapter 4, HTML Attributes. 
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Nested Elements 

Most HTML elements can be nested (contain or be contained within other HTML 
elements). HTML documents consist of nested HTML elements. 

The following example contains three HTML elements. Notice that the <p> 
element is nested in the <body> element, which in turn is nested in the <html> 
element. The results of these tags are shown in Figure 3.1. 

<html> 
<body> 

<p>This is my first paragraph</p> 

</body> 
</html> 

This ts my first paragraph 

Figure 3.1 

The <p> element 

The <p> element is among the most common of elements. 
<p>This is my first paragraph</p> 

The <p> element defines a new paragraph in the HTML document. 
The element has a start tag <p> and an end tag </ p>. 
The element content is: This is my first paragraph. 

The <body> element 

The <body> element defines the body of the HTML document. 
<body> 

<p>This is my first paragraph</p> 
</body> 
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The element has a start tag <body> and an end tag </body>. 

The element content is another HTML element (one or more paragraphs) 
There are usually dozens of elements within the body element. 



The <html> element 

The <html > element defines the entire HTML document. 
<html> 

<body> 

<p>This is my first paragraph</p> 
</body> 

</html> 

The element has a start tag <html > and an end tag </html >. 
The element content is another HTML element (the body) . 

Don't Forget the End Tag 

Most browsers will display HTML correctly even if you forget the end tag. 

<p>This is a paragraph 
<p>This is another paragraph 

The previous example will work in most browsers, but don't rely on it. Forgetting 
the end tag can produce unexpected results or errors. 



NOTE 



Future versions of HTML will not allow you to skip end tags. 
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Empty HTML Elements 

HTML elements without content are called empty elements. Empty elements can 
be closed within the start tag. 

<br> is an empty element without a closing tag. It defines a line break. 

In XML and future versions of HTML, all elements must be closed. 

Adding a slash to the end of start tag, like <b r/ >, is the proper way of closing empty 
elements, accepted by HTML, and XML. 

Even if <br> works in all browsers, writing <br/> instead is more future proof. 

Use Lowercase Tags 

HTML tags are not case sensitive: <P> means the same as <p>. Plenty of Web sites 
use uppercase HTML tags in their pages. 

w3 schools uses lowercase tags because the World Wide Web Consortium (W3C) 
recommends lowercase in HTML 4. 
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CHAPTER 4 

HTML ATTRIBUTES 



In This Chapter 

□ Standard HTML Attributes 

□ Defining Attribute Values 

□ HTML Attributes Reference 

Standard HTML Attributes 

Attributes provide additional information about HTML elements. 
HTML elements can have attributes. 

Attributes provide additional information about the element. 

Attributes are always specified in the start tag. 

Attributes come in name/value pairs like: name="val ue" . 

Defining Attribute Values 

Attribute values should always be enclosed within quotation marks. While 
"double quotes" are the most common, single-style quotes (also called primes) are 
also allowed. In some rare situations, like when the attribute value itself includes 
quotation marks, it is necessary to use primes. For example: 

name='John "Shotgun" Nelson' 

As another example, HTML links are defined with the <a> tag. The Web address, 
surrounded by quotation marks, is the value of the attribute of the link element. 
The results appear in Figure 4.1. 

<a href="http ://www. w3school s . com">Thi s is a link</a> to the 
w3schools web site. 

Ttois atiok to the w3scbwls Web site. 



Figure 4.1 



17 



Learn HTML and CSS with w3schools 



TIP 



Attribute names and values are not case sensitive. However, the World Wide 
Web Consortium (W3C) recommends using lowercase attributes and values in its HTML 
4 recommendation. Later versions require using lowercase. 



HTML Attributes Reference 

Table 4.1 lists some attributes that are standard for most HTML elements. 



Table 4.1 : Core Attributes 



Attribute 


Value 


Description 


class 


class_rule or style_rule 


The class of the element 


id 


id_name 


A unique id for the element 


style 


style_definition 


An inline style definition 


title 


tooltip_text 


A text to display in a tool tip 



NOTE 



A specific id may only appear once in a web page, while class refers to a 
class of elements that may appear many times in the same page. 



The attributes listed in these references are standard and are supported by all HTML 
tags (with a few exceptions). A full list of legal attributes for each HTML element is 
listed in the w3schools Complete HTML Reference online at: 




http : / / www. w3 schools . com/ tags/ default . asp 

For more information about standard attributes, see the HTML Standard Attri- 
butes Reference online at: 



http : / / www. w3 schools . com/ tags/ ref_s tandardattributes . asp 
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CHAPTER 5 



HTML HEADINGS, 
RULES, & COMMENTS 



In This Chapter 

□ HTML Headings 

□ HTML Rules (Lines) 

□ HTML Comments 

□ Viewing HTML Source Code 

HTML Headings 

Because users may skim your pages by their headings, it is important to use 
headings to show the document structure. Headings are defined, from largest to 
smallest, with the <hl> to <h6> tags. 

HI headings should be used as main headings, followed by H2 headings, then less 
important H3 headings, and so on. You can compare the appearance of the head- 



ings in Figure 5.1. 




Try it yourself » H 


<hl>This is a Heading 


l</hl> 


<h2>This is a Heading 


2</h2> 


<h3>This is a Heading 


3</h3> 


<h4>This is a Heading 


4</h4> 


<h5>This is a Heading 


5</h5> 



<h6>This is a Heading 6</h6> 
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This is a Heading 1 

This is a Heading 2 

This is a Heading 3 
This is a Heading 4 

This is * Heading 5 
This is a Heading 6 

Figure 5.1 



Use HTML headings for headings only. Don't use headings to make text BIG or 
bold. 

Search engines use your headings to index the structure and content of your Web pages. 



Browsers automatically add an empty line before and after headings. 



HTML Rules (Lines) 

The <hr/> tag is used to create a horizontal rule (line) across the browser page. 
Rules are often used to separate sections of a document, as shown in Figure 5.2, or 
to show a visual break. 



Try it yourself » 



<html> 
<body> 

<p>The hr tag defines a horizontal rule:</p> 
<hr /> 

<p>This is a paragraph</p> 
<hr /> 

<p>This is a paragraph</p> 
<hr /> 

<p>This is a paragraph</p> 

</body> 
</html> 
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The hr tag defines a horizontal rule: 



This is a paragraph 



This b a paragraph 



This is a paragraph 



Figure 5.2 



HTML Comments 



Comments can be inserted in the HTML code to make it more readable and under- 
standable. Comments are ignored by the browser and are not displayed, as demon- 
strated in Figure 5.3. 

Comments are written like this: 



Try it yourself » 



<html> 
<body> 

<!--This comment will not be displayed--> 
<p>This is a regular paragraph</p> 

</body> 
</html> 



This is a regular paragraph 



Figure 5.3 



NOTE 



Notice there is an exclamation point after the opening bracket, but 
not before the closing bracket. 
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Viewing HTML Source Code 

Have you ever seen a Web page and wondered "Hey! How did they do that?" To 
find out, right-click in the page and select View Source (in Internet Explorer), View 
Page Source (in Firefox), or similar options for other browsers. This will open a 
window that shows you the HTML code of the page, as shown in Figure 5.4. 



<!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional/ /ER" n ht tp; / /vvv . v\ 
<litmi lang="en-DS™ xml : lang="en-US n xmln3=* , http: //www. w3 . org/1999/xtitml"> 
<bead> 

<titie>Tryit Editor vl.4</title> 

<link rel= n stylesheet" type^text/css" href-" / cry it « ess " /> 
< script type="text/ javascript "> 
function displayad U 

i 

document .getEleinentBy Id ( "adf rame" ) . src-"/tryitbanner . asp?3ecid-tryhtml£rnd«' T 

} 

</script> 
</nead> 

<body> 

< table width-" 1001" border- "0" oellpadding="0 " cell spac i ng- M 0 n > 

<tr> 

<td align=" center "> 

< i frame id="adf rame" style^background- color : #f f f f f f " lieigbt= n 9S n width="89Q 

src=" / tr yitbanner ■ a gp?secid=tr yntmls r nd=Q .310436 4 "></ i frame > 

</td> 

</tr> 

</tabie> 



Figure 5.4 



HTML Tag Reference 



The tag reference for w3schools contains additional information about these tags 
and their attributes. A full list of legal attributes for each HTML element is listed in 
the w3schools Complete HTML Reference online at: 



http : / / www. w3schools . com/ tags/ default . asp 
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HTML PARAGRAPHS 



In This Chapter 

□ HTML Paragraphs 

□ HTML Line Breaks 

□ HTML Output Tips 



HTML Paragraphs 



HTML documents are divided into paragraphs. Paragraphs are defined with the 
<P> tag. 

<p>This is a paragraph .</p> 



[ 



NOTE 



Most browsers automatically add an empty line before and after paragraphs. 



Don't Forget the End Tag 

Most browsers will display HTML correctly even if you forget the end tag: 

<p>This is a paragraph. 

<p>This is another paragraph .</p> 

This code will work in most browsers, but don't rely on it. Forgetting the end tag 
can produce unexpected results or errors. Future versions of HTML will not allow 
you to skip end tags. 
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HTML Line Breaks 

Use the <br /> tag if you want a line break (a new line) without starting a new 
paragraph. The <br /> element is an empty HTML element. It has no end tag. 
The results of this code are shown in Figure 6.1. 



Try it yourself » 



<html> 
<body> 



<p>This is<br />a para-<br />graph with line breaks</p> 



</body> 
</html> 



This is 
a para- 
graph with line breaks 



Figure 6.1 



In XML and future versions of HTML, HTML elements with no end tag 
(closing tag) are not allowed. Even if <br> works in most browsers, writing <br /> 
instead is more future-proof and thus considered best practice. 



HTML Output Tips 

You can never be sure how HTML will be displayed. Large or small screens, differ- 
ent brands of browsers, and resized windows will create different results. 

Be aware that with HTML, you cannot change the output by adding extra spaces 
or extra lines in your HTML code. The browser will remove extra spaces and extra 
lines when the page is displayed. Any number of lines count as one space, and any 
number of spaces count as as one space. 

The following example shows how one might naturally think to format a passage of 
multiline text, but the results of that code, shown in Figure 6.2, remind you that the 
browser doesn't break the lines as you expect without a <br /> tag. 
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Try it yourself » 





<html> 
<body> 



<P> 

My Bonnie lies over the ocean. 

My Bonnie lies over the sea. 

My Bonnie lies over the ocean. 

Oh, bring back my Bonnie to me. 

</p> 

<p>Note that your browser ignores your layout !</p> 

</body> 
</html> 



My Bonnie lies over the ocean. My Bonnie Ees over the sea. My Bonnie Hes 
over the ocean. Oh, bring back my Bonnie to me. 

Note that your browser ignores your layout! 



Figure 6.2 



The next example demonstrates some of the default behaviors of paragraph ele- 
ments. As you can see in Figure 6.3, despite the fact that they were typed very 
differently, the first two paragraphs end up looking similar to the third paragraph, 
which had no extraneous spaces or line breaks. 



Try it yourself » 



<html> 
<body> 

<P> 

This paragraph 
contains a lot of lines 
in the source code, 

but the browser (continued) 
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(continued) 
ignores it. 

</p> 



<P> 

This paragraph 

contains a lot of spaces 

in the source code, 
but the browser 
ignores it. 

</p> 



<P> 



The number of lines in a paragraph depends on the size of 
your browser window, if you resize the browser window, the 
number of lines in this paragraph will change. 

</p> 



</body> 
</html> 



This paragraph contains a lot of tines in the source code, but the browser 
ignores it. 

This paragraph contains a Jot of spaces in the source code, but the brow ser 
ignores it. 

The number of lines in a paragraph depends on the size of your browser 
window. If you resize the browser window, the number of fines in this paragraph 
will change. 



Figure 6.3 



Complete Tag Reference 

The w3 schools tag reference contains additional information about these tags and 
their attributes. A full list of legal attributes for each HTML element is listed in 
the w3schools Complete HTML Reference online at: 

^^^^ http://www.w3schools.com/ tags/ default.asp 
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CHAPTER 7 

HTML TEXT 
FORMATTING 



In This Chapter 

□ HTML Formatting Tags 

□ Text Formatting 

□ Preformatted Text 

□ "Computer Output" Tags 

□ Address 

□ Abbreviations and Acronyms 

□ Text Direction 

□ Quotations 

□ Deleted and Inserted Text 

HTML Formatting Tags 

HTML uses tags like <b> and <i > to modify the appearance of text, like bold or 
italic. These HTML tags are called formatting tags. Refer to the end of this chapter 
for a complete reference. 
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Text Formatting 

The following example demonstrates how you can format text in an HTML docu- 
ment. The results appear in Figure 7.1. 



Try it yourself » 



<html> 
<body> 

<pxb»This text is bold</bx/p> 
<pxstrong>Thi s text is strong</strongx/p> 
<pxbig>This text is big</bigx/p> 
<pxem>This text is emphasi zed</emx/p> 
<pxi>This text is i tal i c</ix/p> 
<pxsmal l>Thi s text is smal l</smal lx/p> 

<p>This is<sub> subscri pt</sub> and <sup>superscri pt</sup></ 
P> 

</body> 
</html> 



This text is bold 
This text is strong 
This text is big 

This text is emphasized 
This text is italic 
This text is small 

This is subscript and su P« sa V t 
Figure 7.1 
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Preformatted Text 

This example demonstrates how you can control the line breaks, spaces, and char- 
acter widths with the <pre> tag. 

The results appear in Figure 7.2. You'll see more examples of computer 
output in the next section. 



Try it yourself » 



<html> 
<body> 

<pre> 
This is 

Preformatted text. 

it preserves both spaces 

and line breaks and shows the text in a monospace font. 
</pre> 

<p>The pre tag is good for displaying computer code:</p> 
<pre> 

for i = 1 to 10 

print i 
next i 
</pre> 

</body> 
</html> 



This is 

Preformatted text. 

It preserves bath spaces 

and line breaks and shows the text in a monospace font. 
The pre tag is good for displaying computer code: 

for i - 1 to 10 

print i 
next i 

Figure 7.2 
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"Computer Outpuf'Tags 

This example demonstrates how different "computer output" tags will be displayed. 
The results appear in Figure 7.3. 



Try it yourself » 



<html> 
<body> 

<code>Computer code</code> 
<br /> 

<kbd>Keyboard input</kbd> 
<br /> 

<tt>Teletype text</tt> 
<br /> 

<samp>Sample text</samp> 
<br /> 

<var>Computer van" abl e</var> 
<br /> 

<P> 

<b>Note:</b> These tags are often used to display computer/ 
programming code on the page. 

</p> 

</body> 
</html> 



Computer code 




Keyboard input 




Teletype text 




Sample text 




Computer variable 




Note: These tags are often used to display computer program 
page. 


[ning code on the 



Figure 7.3 
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Address 

This example demonstrates how to write an address in an HTML document. The 
results appear in Figure 7.4. 



Try it yourself » 



<html> 
<body> 

<address> 
Donald Duck<br> 
BOX 555<br> 
Di sneyland<br> 
USA 

</address> 

</body> 
</html> 



Donald Duck 
BOX 555 
Disneyland 
USA 



Figure 7.4 
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Abbreviations and Acronyms 

This example demonstrates how to handle an abbreviation or an acronym. The 
results appear in Figure 7.5. 



Try it yourself » 



<html> 
<body> 

<abbr ti tl e="uni ted Nati ons">UN</abbr> 
<br /> 

<acronym title="world wide web">www</acronym> 

<p>The title attribute is used to show the spell ed-out 
version when holding the mouse pointer over the acronym 
or abbreviation.</p> 

</body> 
</html> 



UN 
WWW 

The title attribute is used to show the spelled- out version when holding the 
mouse pointer over the aeromm or abbreviation 

Figure 7.5 
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Text Direction 

This example demonstrates how to change the text direction. The results appear in 
Figure 7.6. 



Try it yourself » 



<html> 
<body> 

<P> 

if your browser supports bidirectional override (bdo) , the 
next line will be written from the right to the left 
(rtl): 

</p> 

<bdo dir= ,, rtl"> 

Here is some backward text 

</bdo> 

</body> 
</html> 



If your browser supports bidirectional override (bdo), the nest ttne wiH be 
written from the right to the left (rtf): 

ttet drawkcab emos si ereH 
Figure 7.6 
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Quotations 

This example demonstrates how to handle long and short quotations. The results 
appear in Figure 7.7. 



Try it yourself » 



<html> 
<body> 

A blockquote quotation: 
<blockquote> 

This is a long quotation. This is a long quotation. This is 
a long quotation. This is a long quotation. This is a long 
quotation . 

</blockquote> 

<pxb>The browser inserts line breaks and margins for a 
blockquote el ement . </bx/p> 

A short quotation: 

<q>This is a short quotati on</q> 

<pxb>The q element does not render as anything special. </ 

bx/p> 

</body> 
</html> 



A blockquote quotation 

This is a long quotation. This is a long quotation. This is a long 
quotation. This is a long quotation. This is a long quotation. 

The browser inserts line breaks and margins for a blockquote element. 

A short quotation; 'This is a short quotation" 

The q element does not render as anything special. 

Figure 7.7 
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Deleted and Inserted Text 

This example demonstrates how to mark a text that is deleted (strikethrough) or 
inserted (underscore) to a document. The results appear in Figure 7.8. 



Try it yourself » 



<html> 
<body> 

<P> 

a dozen is 

<del >twenty</del > 

<i ns>twel ve</i ns> 

pi eces 

</p> 

<P> 

Most browsers will <del>overstri ke</del> deleted text and 
<i ns>underscore</i ns> inserted text. 

</p> 
<P> 

Some older browsers will display deleted or inserted text as 
plain text. 

</p> 

</body> 
</html> 



a dozen is tw e nty twelve pieces 

Most browsers wifl overstrike deleted text and underscore inserted text 
Some older browsers will display deleted or inserted text as plain text. 

Figure 7.8 
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Text Formatting Tags 

Examples of these tags' results appear in Figure 7.9. 



Many of these tags are either deprecated or soon will be. Formatting 
with tags is very bad and should be done with CSS, and/or more descriptive content 
driven tags. Additionally, the <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, 
<var>, and <ci te> tags are all phrase tags. They are not deprecated, but it is pos- 
sible to achieve richer effect with CSS. 



TAG 


DESCRIPTION 


<b> 


Defines bold text 


<big> 


Defines big text 


<em> 


Defines emphasized text 


<i> 


Defines italic text 


<small> 


Defines small text 


<strong> 


Defines strong text 


<sub» 


Defines subscripted text 


<sup> 


Defines superscripted text 


<ins> 


Defines inserted text 


<del> 


Defines deleted text 


<s> 


Deprecated. Use <del> instead 


<strike> 


Deprecated. Use <del> instead 


<u> 


Deprecated. Use styles instead 



Defines bold text 
Defines big text 
Defines emphasized text 
Defines italic Text 
Defines small text 
Defines strong text 
Defines subscripted text 
Defines superscripted text 
Defines inserted text 
Be fine a deleted text 



Figure 7.9 
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Computer Output Tags 

Examples of these tags' results appear in Figure 7.10. 



TAG 


DESCRIPTION 


<code> 


Defines computer code text 


<kbd> 


Defines keyboard text 


<samp> 


Defines sample computer code 


<tt> 


Defines teletype text 


<var> 


Defines a variable 


<pre> 


Defines preformatted text 


<listing> 


Deprecated. Use <pre> instead 


<plaintext> 


Deprecated. Use <pre> instead 


<xmp> 


Deprecated. Use <pre> instead 



Defines computer code text 
Defines keyboard text 
Defines sample confute r code 
Defines teletype texc 
Defi/ies a vdriabie 
Defines preformatted te^t 

Figure 7.10 
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Citations, Quotations, and Definition 
Tags 

Examples of these tags' results appear in Figure 7.11. 



TAG 


DESCRIPTION 


<abbr> 


Defines an abbreviation 


<acronym> 


Defines an acronym 


< address > 


Defines an address element 


<bdo> 


Defines the text direction 


<blockquote> 


Defines a long quotation 


<q> 


Defines a short quotation 


<cite> 


Defines a citation 


<dfn> 


Defines a definition term 



Defines an abbreviation 
Defines an acronym 
Defines an address element 
Defines the text direction 

Defines a long quotation 
"Defines a short quotation" 
Defines a citation 
Defines a definition term 
Figure 7.11 
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In This Chapter 

□ HTML Style Attribute 

□ Deprecated Tags and Attributes 

□ Common HTML Styles 

The HTML Style Attribute 

The styl e attribute is a new HTML attribute. It introduces the use of CSS in 
HTML. The purpose of the styl e attribute is to provide a common way to style 
all HTML elements. 

Styles were introduced with HTML 4 as the new and preferred way to style HTML 
elements. With HTML styles, formatting and attributes can be added to HTML 
elements directly by using the styl e attribute, or indirectly in separate Cascading 
Style Sheets (CSS files). 

In this book, we use the styl e attribute to introduce you to HTML styles 
and CSS. You can learn more about styles and CSS in our tutorial, Learn 
CSS with w3 schools. 

The code in the following example and the results in Figure 8.1 introduce you to a 
new way of adding formatting to a document. 



Try it yourself » 



<html> 

<body styl e=" background-col or: Gray; "> 

<hl>Look! Styles and colors</hl> 

<p styl e=" font- f ami ly : verdana; color: red"> 
This text is in Verdana and red</p> 



<p styl e="font-f ami 1 y : ti mes ; col or : green"> 
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This text is in Times and green</p> 

<p style="font-size: 30px">This text is 30 pixels high</p> 

</body> 
</html> 



Look! Styles and colors 

This text is in Verdana and red 
THs text is in Times and green 

This text is 30 pixels high 



Figure 8.1 



E Because this book is not printed in color, it might be difficult to see the 
results dealing with in the figures. To see how the results look on the screen, 
enter this code into the Try It Yourself text editor at w3schools.com. 

Deprecated Tags and Attributes 

In HTML 4, some tags and attributes are defined as deprecated. Deprecated means 
that they will not be supported in future versions of HTML and The message is 
clear: Avoid the use of deprecated tags and attributes. 

These tags and attributes should be avoided, and styles should be used instead: 



TAGS 


DESCRIPTION 


< center > 


Defines centered content 


<font> and <basefont> 


Defines HTML fonts 


<s> and <strike> 


Defines strikeout text 


<u> 


Defines underlined text 


ATTRIBUTES 


DESCRIPTION 


align 


Defines the alignment of text 


bgcolor 


Defines the background color 


color 


Defines the text color 
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Common HTML Styles 

Background Color 

<body styl e=" background-col or : gray"> 

The styl e attribute defines a style for the <body> element. The results of the style 
code appear in Figure 8.2. 



Try it yourself » 



<html> 

<body styl e=" background-col or : gray"> 
<h2>l_ook: Colored Background ! </h2> 

</body> 
</html> 



Look: Colored Background! 

Figure 8.2 



The new styl e attribute makes the "old" bgcol or attribute, shown in Figure 8.3, 
obsolete. 



Try it yourself » 



<html> 

<body bgcolor= ,, gray"> 

<h2>l_ook: Colored Background ! </h2> 

<p>For future-proof html, use html styles instead :</p> 
<p>styl e="backg round-col or : gray"</p> 

</body> 
</html> 
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Look: Colored Background! 

For future -proof HTML, use HTML styles instead 
style='l>ackground~ colorgray" 
Figure 8.3 



Font Family, Color, and Size 

The styl e attribute defines a style for the <p> element, as shown in Figure 8.4: 



Try it yourself » 



<html> 
<body> 

<hl styl e="font-fami ly : verdana">A headi ng</hl> 

<p styl e="font-fami ly : courier new; color: red; font- 
size: 20px; ">A paragraph</p> 

</body> 
</html> 



A heading 

A paragraph 



Figure 8.4 



The new styl e attribute makes the old <f ont> tag, shown in Figure 8.5, obsolete. 



Try it yourself » 



<html> 
<body> 

<pxfont size= ,, 2" face= ,, verdana"> 
This is a paragraph. 
</fontx/p> 
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<pxfont size= ,, 5" face= ,, Times" col or=" red"> 

This is another paragraph. 

</fontx/p> 

</body> 
</html> 



This is a paragraph. 

This is another paragraph. 

Figure 8.5 



Text Alignment 

<hl style= ,, text-align:center"> 

The style attribute defines a style for the <hl> element. The results appear in 
Figure 8.6. 



Try it yourself » 



<html> 
<body> 

<hl styl e="text-al i gn : center">Thi s is heading l</hl> 

<p>The heading above is aligned to the center of this page. 
The heading above is aligned to the center of this page. 
The heading above is aligned to the center of this page. 

</p> 

</body> 
</html> 



This is heading 1 

The heading above is aligned to the center of this page. The heading above is 
aligned to the center of this page. The heading above is aKgned to the center of 
thk page 

Figure 8.6 
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Although they display similarly in the browser, the new styl e attribute makes the 
old al i gn attribute in Figure 8.7 obsolete. 



Try it yourself » 



<html> 
<body> 

<hl al ign= ,, center">Thi s is heading l</hl> 

<p>The heading above is aligned to the center of this page. 
The heading above is aligned to the center of this page. 
The heading above is aligned to the center of this page.</ 
P> 

</body> 
</html> 



This is heading 1 

The heading above is aligned to the center of this page The heading above is 
aligned to the center of this page. The heading above is aligned to the center of 
this page. 



Figure 8.7 



Complete Tag Reference 

The w3 schools tag reference contains additional information about these tags and 
their attributes. A full list of legal attributes for each HTML element is listed in the 
w3schools Complete HTML Reference online at: 

^^^^ http://www.w3schools.com/tags/default.asp 
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In This Chapter 

□ HTML Links 

□ Open a Link in a New Browser Window 

□ Hyperlinks, Anchors, and Links 

□ HTML Link Syntax 

□ Links on the Same Page 

□ Creating a mai 1 to : Link 

□ Creating an Image Link 

HTML Links 

A link is the "address" to a document (or a resource) located on the World Wide 
Web or elsewhere within your own Web server. Both types of links are shown in the 
following code example. 

<html> 
<body> 

<P> 

<a href="l astpage . htm"> 

This text</a> is a link to a page on this web site. 

</p> 

<P> 

<a href="http : //www. mi crosoft . com/"> 

This text</a> is a link to a page on the world wide web. 

</p> 

</body> 
</html> 
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You can see in Figure 9.1 that internal and external links are displayed similarly in 
the browser. 

This text is a Bnk to a page on this Web site. 

This text is a link to a page on the World Wide Web, 

Figure 9.1 



Open a Link in a New Browser Window 

The target attribute enables you to control how the browser responds when you 
click on the link. The following example demonstrates how to link to another page 
by opening a new window so that the visitor does not have to leave your Web site. 

The results of the codes are shown in Figure 9.2. 



Try it yourself » 



<html> 
<body> 

<a href="l astpage . htm" target="_bl ank">i_ast Page</a> 
<P> 

if you set the target attribute of a link to "jDlank" , 
the link will open in a new window. 

</p> 

</body> 
</html> 

Last Page 

If you set the target attribute of a link to "Jblank", the link will open in a new 
window. 

Figure 9.2 
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Hyperlinks, Anchors, and Links 

In Web terms, a hyperlink is a reference (an address) to a resource on the Web. 
Hyperlinks can point to any resource on the Web: an HTML page, an image, a 
sound file, a movie, and so on. 

An HTML anchor is a term used to define a hyperlink destination inside a docu- 
ment. 

The anchor element <a> defines both hyperlinks and anchors. 



NOTE 



We will use the term HTML link when the <a> element points to a 
resource, and the term HTML anchor when the <a> elements defines an address 
inside a document. 



HTML Link Syntax 

The start tag contains attributes about the link. 
<a href="url ">Li nk text</a> 

The element content (Link text) defines the part to be displayed. The element con- 
tent doesn't have to be text. You can link from an image or any other HTML ele- 
ment. 



href Attribute 

The href attribute defines the link "address". The following code will display in a 
browser as shown in Figure 9.3: 

This <a> element defines a link to w3schools: 

<a href= ,, http://www.w3schools.com/">visit w3school s ! </a> 

Visit \v3 schools! 
Figure 9.3 



47 



Learn HTML and CSS with w3schools 



The target Attribute 

The target attribute defines where the linked document will be opened. 
The following code example opens the document in a new browser window: 



Try it yourself » 



<html> 
<body> 

<a href=http://www.w3schools.com/ target="_bl ank">vi si t 
w3school s ! </a> 

<P> 

if you set the target attribute of a link to "jDlank" , 
the link will open in a new window. 

</p> 

</body> 
</html> 



You can use the following options for the target attribute: 



OPTION 


DESCRIPTION 


_blank 


Opens the linked document in a new window 


_self 


Opens the linked document in the same frame as it was 
clicked (this is default) 


_parent 


Opens the linked document in the parent frameset 


_top 


Opens the linked document in the full body of the 
window 


framename 


Opens the linked document in a named frame 
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The name Attribute 

When the name attribute is used, the <a> element defines a named anchor inside 
an HTML document. Named anchors are not displayed in any special way by the 
browser because they are invisible to the reader. 

Named anchors are sometimes used to create a table of contents at the beginning of 
a large document. Each chapter within the document is given a named anchor, and 
links to each of these anchors are put at the top of the document. 

If a browser cannot find a named anchor that has been specified, it goes to the top 
of the document. No error occurs. 

Named anchor syntax: 

<a name="l abel ">Any content</a> 
The link syntax to a named anchor: 

<a href="#label ">Any content</a> 

The # in the href attribute defines a link to a named anchor. A named anchor 
inside an HTML document: 

<a name="ti ps">useful Tips Section</a> 
A link to the "Useful Tips Section" from elsewhere in the same document: 

<a href="#ti ps">Jump to the useful Tips Section</a> 
A link to the "Useful Tips Section" from another document: 

<a href="http ://www. w3school s . com/html _tutori al . 
htm#ti ps">Jump to the useful Tips Section</a> 



LUfl Always add a trailing slash to subfolder references. If you link like this: 
href="http://www.w3school s . com/html ",you will generate two HTTP requests 
to the server because the server will add a slash to the address and create a new request 
like this: href ="http : //www. w3 school s . com/html/". 
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Links on the Same Page 

The following code example demonstrates how to use a link to jump to another 
part of a document. The results of the code are shown in Figure 9.4. 



Try it yourself » 



<html> 
<body> 



<P> 

<a href= ,, #C4">See also Chapter 4.</a> 

</p> 

<h2>Chapter l</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 2</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 3</h2> 

<p>This chapter explains ba bla bla</p> 

<h2xa name= ,, C4">Chapter 4</ax/h2> 
<p>This chapter explains ba bla bla</p> 

<h2>Chapter 5</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 6</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 7</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 8</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 9</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter 10</h2> 

<p>This chapter explains ba bla bla</p> 
<h2>Chapter ll</h2> 

<p>This chapter explains ba bla bla</p> 



50 



Chapter 9: HTML links 



<»l l£.^>V_lld|J LC 1 ItN/ IlL^ 

<p>This chapter explains 


ba bla bla</p> 


<»l |£.->V_I ld|J LC 1 ±JS/ Ml^ 

<p>This chapter explains 


ba bla bla</p> 


<»l l£.->V_l ld|J LC 1 ±.'-t<-./ \\t.*> 

<p>This chapter explains 


ba bla bla</p> 


<»l |£.->V_I ld|J LC 1 iJN/ Ml^ 

<p>This chapter explains 


ba bla bla</p> 


<sl ld|J LC 1 IUn/ IlL^ 

<p>This chapter explains 


ba bla bla</p> 


<h2>Chapter 17</h2> 
<p>This chapter explains 


ba bla bla</p> 


</body> 
</html> 




See also Chapter 4. 






i^ndpicr i 






This chapter explains ba bla bla 






^Dttpitl L 






This chapter explains ba bla bla 












This chapter explains ba bla bla 






Chapter 4 






This chapter explains ba bla bla 







Figure 9.4 
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Creating a mailto: Link 

The following example demonstrates how to link to an e-mail address and generate 
a new e-mail message in your default e-mail application (this works only if you have 
mail installed). The results of the code are shown in Figure 9.5. 



Try it yourself » 



<html> 
<body> 

<P> 

This is a mail link: 

<a href="mai 1 to : someone@mi crosoft . com?subject=Hel 1 o%20 
agai n"> 

Send Mail</a> 

</p> 

<P> 

<b»Note:</b> Spaces between words should be replaced by %20 
to <b>ensure</b> that the browser will display your text 
properly. 

</p> 

</body> 
</html> 



Tliis is a mail Link: Send Mail 

Note: Spaces between words should be replaced by %20 to ens a re that the 
browser wul display your text properly. 

Figure 9.5 
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The following example demonstrates a more complicated mai 1 to : link. This link 
not only generates a new e-mail, it adds a cc, bcc, a subject line, and the message 
body. The results of the code are shown in Figure 9.6. 



Try it yourself » 



<html> 
<body> 

<P> 

This is another mail to link: 

<a href="mai 1 to : someone@mi crosoft . com?cc=someoneel se@ 
mi crosoft . com&bcc=andsomeoneel se2@mi crosoft . 
com«&subject=Summer%20Party«&body=You%20are%20invited%20 
to%20a%20big%20summer%20party! ">Send mail !</a> 

</p> 
<P> 

<b>Note:</b> Spaces between words should be replaced by %20 
to <b>ensure</b> that the browser will display your text 
properly. 

</p> 

</body> 
</html> 



Has is another maOto fink Send mail! 

Note: Spaces between words should be replaced by %20 to ensure that the 
browser wfl] display your text properly. 



Figure 9.6 
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Creating an Image Link 



The following example demonstrates how to use an image as a link. Click on the 
image to go to the linked page. The results of the code are shown in Figure 9.7. 




<html> 
<body> 



<p>Create a link attached to an image: 
<a href= ,, default.htm"> 

<img src= ,, smiley.gif" al t="HTMl_ tutorial" width= ,, 32" 
height= ,, 32" /> 

</ax/p> 

<p>No border around the image, but still a link: 
<a href= ,, default.htm"> 

<img border= ,, 0" src= ,, smiley.gif" al t="HTMl_ tutorial" 
width="32" height="32" /> 

</ax/p> 

</body> 
</html> 



Create a link attached to an image; l^w J 



You learn all about HTML images in Chapter 10, "HTML Images." 



No border around the image, but still a link; 




Figure 9.7 
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CHAPTER 10 

HTML IMAGES 



In This Chapter 

□ i mg Tag and the s re Attribute 

□ Insert Images from Different Locations 

□ Background Images 

□ Aligning Images 

□ Floating Images 

□ Adjusting Image Sizes 

□ alt Attribute 

□ Creating an Image Map 



img Tag and the sre Attribute 

In HTML, images are defined with the <i mg> tag. 

The i mg tag is empty, which means that it contains attributes only and it has no 
closing tag. 

To display an image on a page, you need to use the sre attribute, sre stands for 
"source". The value of the sre attribute is the URL of the image you want to dis- 
play on your page. 

The syntax of defining an image: 

<img src="url" /> 

The URL points to the location or address where the image is stored. An image file 
named "boat.gif" located in the directory "images" on "www.w3schools.com" has 
the URL: 

http : //www . w3school s . com/i mages/boat . gi f 



It is not necessary to have administrative access to the actual image 
file to which you are linking. You can link to any image as long as you know its URL 
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The browser puts the image where the image tag occurs in the document. If you put 
an image tag between two paragraphs, the browser shows the first paragraph, then 
the image, and then the second paragraph. 

The following example demonstrates how to insert images to your Web page. The 
results of this code are shown in Figure 10.1. 



<P> 

An image: 

<img src= ,, constr4.gif" width= ,, 144" hei ght= ,, 50" /> 

</p> 

</body> 
</html> 



"Don't try this at home!" The images for this example reside on the 



w3schools server rather than your own, so unless you're using the Try It Yourself edi- 
tor at www.w3shools.com, you won't get the same results. If you try this exact code 
in your browser the image will be missing. 



The next section shows you how to point to images on other servers. 




<html> 
<body> 




Figure 10.1 
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Insert Images from Different Locations 

The example shown in Figure 10.2 demonstrates how to insert an image from 
another folder on your server or another location on the Web. 



Try it yourself » 



<html> 
<body> 

<p>An image from another folder :</p> 

<img src= ,, /images/chrome.gif" width= ,, 33" hei ght= ,, 32" /> 
<p>An image from w3school s : </p> 

<img src="http://www.w3school s . com/images/w3school s_green . 
jpg" width= ,, 104" hei ght= ,, 142" /> 

</body> 
</html> 

An image from another folder 
An image from w3 schools: 




Figure 10.2 



Image files can take time to load in the browser, so use them sparingly. 
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Background Images 

The next example demonstrates how to add a background image to an HTML 
page. The results appear in Figure 10.3. 



Try it yourself » 



<html> 

<body background="background . jpg"> 
<h3>l_ook: A background image ! </h3> 

<p>Both gif and jpg files can be used as html backgrounds . </ 
P> 

<p>if the image is smaller than the page, the image will re- 
peat itself.</p> 

</body> 
</html> 

Look: A background image! 

Both gif and jpg files can be used as HTML backgrounds. 
If the image is smaller than the page, the image will repeat itself. 
Figure 10.3 
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Aligning Images 



Figures 10.4 and 10.5 demonstrate different ways you can align images within the 
text. 




<html> 
<body> 



<p>The text is aligned with the image 

<img src= ,, hackanm.gif" al i giWbottom" width= ,, 48" hei ght= ,, 48" 

/> 

at the bottom. </p> 

<p>The text is aligned with the image 

<img src= ,, hackanm.gif" align= ,, middle" width= ,, 48" hei ght= ,, 48" 

/> 

in the middle.</p> 

<p>The text is aligned with the image 

<img src= ,, hackanm.gif" al i gn= ,, top" width= ,, 48" height= ,, 48" /> 
at the top.</p> 

<pxb>Note :</b> The bottom alignment is the default !</p> 



</html> 
</body> 



The text U aligned with the image 



The text is aligned with the image 



The text is aligned with the image 




at the bottom- 



in the middle. 



at the top. 



Note: The bottom alignment is the default! 



Figure 10.4 
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<html> 



<body> 



<p>This image appears 

<img src= ,, hackanm.gif" width= ,, 48" hei ght= ,, 48" /> 
exactly where it is placed in the code.</p> 

<pximg src= ,, hackanm.gif" width= ,, 48" hei ght= ,, 48" /> 

This image appears exactly where it is placed in the code.</ 



<p>This image appears exactly where it is placed in the 
code. 

<img src= ,, hackanm.gif" width= ,, 48" hei ght= ,, 48" /></p> 



P> 



</body> 
</html> 



This image appears 




exactly where it is placed in the code. 




This image appears exactly where it is placed in the code 



This image appears exactly where it is placed in the code. 




Figure 10.5 
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Floating Images 

In the next example, you learn how to let an image float to the left or right of a 
paragraph. The results appear in figure 10.6. 



Try it yourself » 



<html> 
<body> 

<P> 

<img src= ,, hackanm.gif" al i gn="l eft" wi dth= ,, 48" hei ght= ,, 48" 

/> 

A paragraph with an image. The align attribute of the image 
is set to "left". The image will float to the left of this 
text. 

</p> 
<P> 

<img src="hackanm.gif" align="right" width="48" hei ght="48" 

/> 

A paragraph with an image. The align attribute of the im- 
age is set to "right". The image will float to the right of 
this text. 

</p> 

</body> 
</html> 



A paragraph with an image. The align attribute of the image is set to 
"left" . The image will float to the left of this text. 

A paragraph with an image. The align attribute of the image is set to 
"right 11 . The image will float to the right of this text. 



Figure 10.6 
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Adjusting Image Sizes 

The following example, shown in Figure 10.7, demonstrates how to display images 
in different sizes on the page. 

The wi dth and height attributes allow the page to render properly and more effi- 
ciently before the image is downloaded. Without them, the page will render once, 
then re-render when each image is loaded. 

The image will be scaled to fit the stated height and width. Sometimes this can have 
a desired effect, other times it's disastrous. 



Try it yourself » 



<html> 
<body> 

<P> 

<img src= ,, hackanm.gif" width= ,, 20" hei ght= ,, 20" /> 

</p> 

<P> 

<img src= ,, hackanm.gif" width= ,, 45" hei ght= ,, 45" /> 

</p> 

<P> 

<img src= ,, hackanm.gif" width= ,, 70" hei ght= ,, 70" /> 

</p> 

<p>You can make an image smaller or larger by changing the 
values of the height and width attri butes . </p> 



</body> 




</html> 




ft 




ft 
ft 




You can make an image smaller or larger by char 


ging the values of the 'height" 


and \vidth' 1 attributes. 





Figure 10.7 
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alt Attribute 

The al t attribute is used to define an alternate text for an image. The al t attribute 
tells the reader what he or she is missing on a page if the browser can't load images. 
The browser will then display the alternate text instead of the image. 

The value of the al t attribute is an author-defined text: 

<img src= ,, boat.gif" alt="Big Boat" /> 

It is a good practice to include alternate text for every image on a page to improve the 
display and usefulness of your document for people who have text-only browsers. 

The following example shows what happens when the image file is not available. 
The results are in Figure 10.8. 



Try it yourself » 



<html> 
<body> 



<P> 

An image: 

<img src=" . ./constr4.gif " alt="Si te_Under_Constructi on" 
width="200" height="50" /> 

</p> 



</body> 
</html> 



An image: 



"Site Under Construction" 



Figure 10.8 



Creating an Image Map 

The following example demonstrates how to create an image map with clickable 
regions. Each of the regions is a hyperlink. The results of this example are shown 
in Figure 10.9. 

Creating a simple image link was covered in Chapter 9, "HTML Links". 
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Try it yourself » 



<html> 
<body> 

<p>Click on the sun or on one of the planets to watch it 
closer :</p> 

<img src= ,, planets.gif" wi dth= ,, 145" hei ght= ,, 126" al t="Pl anets" 
usemap= ,, #planetmap" /> 

<map name="pl anetmap"> 

<area shape=" rect" coords="0 , 0 , 82 , 126" alt= ,, Sun" href="sun. 
htm" /> 

<area shape="ci rcl e" coords="90 , 58 , 3" al t= ,, Mercury" 
href="mercur . htm" /> 

<area shape="ci rcl e" coords="124 , 58 , 8" al t="venus" 
href="venus . htm" /> 

</map> 

</body> 
</html> 



Click on the sun or on one of the planets to watch it closer. 




Figure 10.9 



Complete Tag Reference 

w3schools' tag reference contains additional information about these tags and their 
attributes. A full list of legal attributes for each HTML element is listed in the 
w3schools Complete HTML Reference online at: 

^^^^ http : / / www. w3 schools . com/ tags/ default . asp 
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CHAPTER 11 

HTML TABLES 



In This Chapter 



□ 


Creating HTML Tables 


□ 


Table Borders 


□ 


Table with No Border 


□ 


Headings in a Table 


□ 


Table with a Caption 


□ 


Cells Spanning Multiple Columns 


□ 


Tags Inside a Table 


□ 


Cell Padding 


□ 


Cell Spacing 


□ 


Table Background Colors and Images 


□ 


Cell Background Colors and Images 


□ 


frame Attribute 


□ 


Using frame and border to Control Table Borders 



Creating HTML Tables 

Tables are an excellent way to organize and display information on a page. Tables 
are defined using the <tabl e> tag. 

A table is divided into rows with the <t r> tag, and each row is divided into data 
cells using the <td> tag. The letters td stand for "table data," which is the content of 
a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal 
rules, tables, and so on. A simple HTML table appears in Figure 11.1. 
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HTML Tables 



Apples 


44% 


Bananas 


23% 


Oranges 


13% 


Other 


10% 



Figure 11.1 

A basic table includes the following tags: 
Each table starts with a tabl e tag. 
Each table row starts with a t r tag. 
Each table data (cell) starts with a td tag. 

Following is an example of code for a table with one row and one column. 



Try it yourself » 



<html> 
<body> 

<h4>One column:</h4> 
<table border= ,, l"> 
<tr> 

<td>100</td> 
</tr> 
</table> 

</html> 
</body> 
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The following code creates a table with one row and three columns. 



Try it yourself » 



<html> 
<body> 

<table border= ,, l"> 

<tr> 

<td>100</td> 
<td>200</td> 
<td>300</td> 

</tr> 

</table> 

</html> 

</body> 



The following code creates a table with two rows and three columns. 



Try it yourself » 



<html> 
<body> 

<table border= ,, l"> 

<tr> 

<td>100</td> 
<td>200</td> 
<td>300</td> 

</tr> 

<tr> 

<td>400</td> 
<td>500</td> 
<td>600</td> 

</tr> 

</table> 

</body> 
</html> 
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The results of these three example tables appear in Figure 1 1.2. 



0»e cotamn 

jlQO.| 

The foflowmg code Creoles atnbk tvijfa ooe row and three columns, 
The following code creates a. table wife two fows Add three coh&sfls. 



100 



200 



300 



400. 500 600 



Figure 11.2 



Table Borders 

The border attribute controls the appearance of the table's borders or lines. The 
default border is 0, so if you do not specify a border attribute, the table is dis- 
played without any borders. Sometimes this is useful, but most of the time, you 
want the borders to be visible. The following example demonstrates the use of dif- 
ferent table borders. The results of this example are shown in Figure 1 1.3. 



Try it yourself » 



<html> 
<body> 

<h4>with a normal border :</h4> 

<table border= ,, l"> 

<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 



<h4>with a thick border :</h4> 
<table border= ,, 8"> 
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<tr> 

<td>Fi rst</td> 
<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 
<td>Row</td> 

</tr> 

</table> 



<h4>with a very thick border :</h4> 

<table border= ,, 15"> 

<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

</body> 
</html> 



With a normal border: 



First iRow 



[Second Row 



With a thick border: 



First Row 



Second Row 



With a very thick border: 




Figure 11.3 
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Table with No Border 

If you don't provide a bo rde r attribute, the default is none. The following example 
shows two ways to create a table with no borders. Figure 11.4 displays the table as 
it appears in the browser. Figure 1 1.4 displays the table as it appears in the browser. 



Try it yourself » 



<html> 
<body> 

<h4>This table has no borders :</h4> 

<tabl e> 

<tr> 

<td>100</td> 

<td>200</td> 

<td>300</td> 
</tr> 
<tr> 

<td>400</td> 

<td>500</td> 

<td>600</td> 
</tr> 
</table> 

<h4>This table also has no borders :</h4> 

<table border= ,, 0"> 

<tr> 

<td>100</td> 

<td>200</td> 

<td>300</td> 
</tr> 
<tr> 

<td>400</td> 

<td>500</td> 

<td>600</td> 
</tr> 
</table> 

</body> 
</html> 
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This table has ae borders: 

100 200 300 
400 500 600 

This table also has ae borders: 

100 200 300 
400 500 600 



Figure 11.4 



Headings in a Table 

Table headings are defined with the <th> tag. Figure 11.5 shows the table as it 
appears in the browser. 



Try it yourself » 



<html> 
<body> 

<table border= ,, l"> 
<tr> 

<th>Headi ng</th> 
<th>Another Headi ng</th> 
</tr> 
<tr> 

<td>row 1, cell l</td> 
<td>row 1, cell 2</td> 
</tr> 
<tr> 

<td>row 2, cell l</td> 
<td>row 2, cell 2</td> 
</tr> 
</table> 

<h4>vertical headers :</h4> 

<table border= ,, l"> 

<tr> 

<th>Fi rst Name:</th> 

(continued) 
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(continued) 

<td>Bill Gates</td> 
</tr> 
<tr> 

<th>Tel ephone : </th> 
<td>555 777 1854</td> 

</tr> 

<tr> 

<th>Tel ephone : </th> 
<td>555 777 1855</td> 

</tr> 

</table> 

</body> 
</html> 



Heading 


Another Heading 


row l p cdl 1 


row 1, ceO 2 


row 2, cdl I 


row 2, ceD 2 



Vertical headers: 



First Name: 


Bill Gates 


Telephone: 


555 777 1854 


Telephone: 


555 777 1855 



Figure 11.5 



Empty Cells in a Table 

Table cells with no content do not display very well in most browsers. Notice that 
the borders around the empty table cell are missing (except when using Mozilla 
Firefox). Figure 1 1.6 shows the table as it appears in the browser. 



Try it yourself » 



<html> 
<body> 
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<table border= ,, l"> 
<tr> 

<td>row 1, cell l</td> 

<td>row 1, cell 2</td> 
</tr> 
<tr> 

<td>row 2, cell l</td> 

<tdx/td> 

</tr> 

</table> 

</body> 
</html> 





[row l h ceB 1 row 1, ceD 2 




[row 2 # cdl 1 







Figure 11.6 



To avoid this, add a nonbreaking space (&nbsp ; ) to empty data cells to ensure the 
borders are visible, as shown in Figure 1 1.7. 



Try it yourself » 



<table border= ,, l"> 
<tr> 

<td>row 1, cell l</td> 
<td>row 1, cell 2</td> 
</tr> 
<tr> 

<td>row 2, cell l</td> 

<td> </td> 

</tr> 

</table> 
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row I, cdl 1 [row I, cell 2 




row 2, cell 1 



Figure 11.7 



The <thead>,<tbody>, and <tf oot> elements are seldom used, because of 
bad browser support. Expect this to change in future versions of HTML 



Table with a Caption 

The following example demonstrates how to create a table with a caption, as shown 
in Figure 1 1.8. 



Try it yourself » 



<html> 
<body> 

<h4>This table has a caption, and a thick border :</h4> 
<table border= ,, 6"> 
<caption>My Capti on</capti on> 
<tr> 

<td>100</td> 

<td>200</td> 

<td>300</td> 
</tr> 
<tr> 

<td>400</td> 

<td>500</td> 

<td>600</td> 
</tr> 
</table> 

</body> 
</html> 
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This table has a caption, and a thick border: 



My Caption 

100 1200 [ioo I 



400 500 600 



Figure 11.8 



Cells Spanning Multiple Columns 

In this example, you learn how to define table cells that span more than one row or 
one column, as shown in Figure 1 1.9. 



Try it yourself » 



<html> 
<body> 



<h4>Cell that spans two col umns :</h4> 

<table border= ,, l"> 

<tr> 

<th>Name</th> 

<th col span= ,, 2">Telephone</th> 
</tr> 
<tr> 

<td>Bill Gates</td> 

<td>555 77 854</td> 

<td>555 77 855</td> 
</tr> 
</table> 

<h4>Cell that spans two rows:</h4> 

<table border= ,, l"> 

<tr> 

<th>Fi rst Name : </th> 

<td>Bill Gates</td> 
</tr> 
<tr> 

<th rowspan= ,, 2">Telephone :</th> 
<td>555 77 854</td> 



(continued 
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(continued) 
</tr> 
<tr> 

<td>555 77 855</td> 
</tr> 
</table> 

</body> 
</html> 



Cell that spans two columns: 



Name Telephone 


BI Gales 555 77 854 


555 77 S55 



CeD that spans two rows: 



First Name: 


Bffl Gates 


Telephone: 


555 77 854 


555 77 855 





Figure 11.9 



Tags Inside a Table 

This example demonstrates how to display elements inside other elements. The 
results appear in Figure 11.10. 



Try it yourself » 



<html> 
<body> 

<table border= ,, l"> 
<tr> 
<td> 

<p>This is a paragraph</p> 
<p>This is another paragraph</p> 
</td> 

<td>This cell contains a table: 
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<table border= ,, l"> 
<tr> 

<td>A</td> 
<td>B</td> 
</tr> 
<tr> 

<td>C</td> 
<td>D</td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 

<td>This cell contains a list 
<ul> 
<1 i>appl es</l i> 
<1 i>bananas</l i> 
<1 i >pi neappl es</l i > 
</ul> 
</td> 

<td>HELLO</td> 

</tr> 
</table> 



</body> 
</html> 



TTiis is a paragraph 
This is another paragraph 


This c 


e!l contains a table: 




This cell contains a list 

• apples 

• bananas 

• pineapples 


HELLO 



Figure 11.10 



77 



Learn HTML and CSS with w3schools 



Cell Padding 

This example demonstrates how to use cell padding to create more white space 
between the cell content and its borders. The results appear in Figure 11.11. 



Try it yourself » 



<html> 
<body> 

<h4>wi thout eel 1 paddi ng : </h4> 

<table border= ,, l"> 

<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

<h4>with eel 1 paddi ng :</h4> 

<table border= ,, l" eel 1 paddi ng= ,, 10"> 

<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

</body> 
</html> 
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First Row 



Second 



Row 



With cellpadding: 



First 


Row 


Second 


Row 



Figure 11.11 
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Cell Spacing 



This example demonstrates how to use cell spacing to increase the distance between 
the cells, as shown in Figure 11.12 



Try it yourself » 



<html> 
<body> 



<h4>without cellspacing:</h4> 

<table border= ,, l"> 

<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 



<h4>with cellspacing:</h4> 

<table border= ,, l" eel 1 spaci ng= ,, 10"> 

<tr> 

<td>Fi rst</td> 

(continued) 
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<td>Row</td> 

</tr> 

<tr> 

<td>Second</td> 
<td>Row</td> 

</tr> 

</table> 

</body> 
</html> 



Without cells pacing: 



First Row 



Second Row 



'With cellspacing: 



[First |Row 
Second Row 



Figure 11.12 



Table Background Colors and Images 

This example demonstrates how to add a background to a table, as shown in Figure 
11.13. 



Try it yourself » 



<html> 
<body> 

<h4>A background color:</h4> 
<table border= ,, l" bgcol or="gray"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 
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<td>Second</td> 

<td>Row</td> 
</tr> 
</tabl e> 

<h4>A background image:</h4> 

<table border= ,, l" background="bgdesert . jpg"> 

<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</tabl e> 

</body> 
</html> 



A background color: 




Second Row 



A background image: 




Figure 11.13 
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Cell Background Colors and Images 

The following example demonstrates how to add a background to one or more table 
cells. The result is shown in Figure 1 1.14. 



Try it yourself » 



<html> 
<body> 

<h4>Cell backgrounds :</h4> 

<table border= ,, l"> 

<tr> 

<td bgcolor= ,, gray">Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td background="bgdesert . jpg"> 

Second</td> 

<td>Row</td> 
</tr> 
</table> 

</body> 
</html> 



Cell backgrounds: 




Figure 11.14 



Aligning Cell Content 

This sample code demonstrates how to use the al i gn attribute to align the content 
of cells to create a neatly organized table. The results of the code are shown in Figure 
11.15. 



Try it yourself » 



<html> 

82 



Chapter 11: HTML Tables 



<body> 

<table width= ,, 400" border= ,, l"> 
<tr> 

<th al ign= ,, left">Money spent on....</th> 
<th al ign= ,, right">January</th> 
<th al i gn=" ri ght">February</th> 

</tr> 

<tr> 

<td align= ,, left">clothes</td> 
<td align= ,, right">$241.10</td> 
<td align= ,, right">$50.20</td> 

</tr> 
<tr> 

<td align= ,, left">Make-up</td> 
<td align= ,, right">$30.00</td> 
<td align= ,, right">$44.45</td> 

</tr> 
<tr> 

<td align= ,, left">Food</td> 
<td align= ,, right">$730.40</td> 
<td align= ,, right">$650.00</td> 

</tr> 

<tr> 

<th align= ,, left">sum</th> 
<th al i gn=" ri ght">$1001 . 50</th> 
<th align= ,, right">$744.65</th> 
</tr> 
</table> 

</body> 
</html> 



Money spent on.... 


January 


February' 


Clothes 


S24U0 


S50.2Q 


Make-Up 


S30.00 


$44.45 


Food 


S730.40 


$650.00 


Snm 


$1001.50 


$744.65 



Figure 11.15 



83 



Learn HTML and CSS with w3schools 



frame Attribute 

This example demonstrates how to use the frame attribute to control the borders 
around the table. The results of these examples appear in Figures 11.16 through 
11.18. If you see no frames around the tables in your browser, either your browser 
is too old or it does not support the attribute. 



Try it yourself » 



<html> 
<body> 

<h4>with f rame= ,, border" : </h4> 
<table f rame= ,, border"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

<h4>with f rame= ,, box" :</h4> 
<table f rame= ,, box"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

<h4>with f rame= ,, void" :</h4> 
<table f rame= ,, void"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
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</table> 

<html> 
<body> 



WiAfhune=' l bonl€r": 


■ First Row 
: Second Row 






First Row 
i Second Row 




Witfc feuae= 


Vmd": 


First Row 
Second Row 





Figure 11.16 



Try it yourself » 



<html> 
<body> 

<h4>wi th f rame= ,, above" : </h4> 
<table f rame= ,, above"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

<h4>with f rame= ,, below" :</h4> 
<table f rame= ,, below"> 
<tr> 



(continued) 
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(continued) 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

<h4>with f rame= ,, hsides" :</h4> 
<table f rame= ,, hsides"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 
</body> 
</html> 



With frame="ab©ve": 

First Row 
Second Row 

WiAframe="betow": 

First Row 
Second Row 



With frame="ksides": 

First Row 
Second Row 



Figure 11.17 
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Try it yourself » 



<html> 
<body> 

<h4>with f rame= ,, vsides" :</h4> 
<table f rame= ,, vsides"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

<h4>with f rame= ,, lhs" :</h4> 
<table frame= ,, lhs"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

<h4>with f rame= ,, rhs" :</h4> 
<table f rame= ,, rhs"> 
<tr> 

<td>Fi rst</td> 

<td>Row</td> 
</tr> 
<tr> 

<td>Second</td> 

<td>Row</td> 
</tr> 
</table> 

(continued) 
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(continued) 



</body> 
</html> 


Witkframe= 




\ First Row 
i Second Row 






;First Row 
I Second Row 




Wi*kframe= 


"rks": 


First Row 
Second Row 





Figure 11.18 



Using frame and border to Control 
Table Borders 

You can use the frame and border attributes to control the borders around the 
table. If you see no frames around the tables in these examples, your browser does 
not support the frame attribute. 



Try it yourself » 



<html> 
<body> 

<table f rame= ,, hsides" border= ,, 3"> 
<tr> 

<td>Fi rst row</td> 
</tr> 
</table> 
<br /> 

<table f rame= ,, vsides" border= ,, 3"> 
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<tr> 

<td>Fi rst row</td> 
</tr> 
</tabl e> 

</body> 
</html> 

First row 



First row 



Figure 11.19 



Table Ta 



TAG 


DESCRIPTION 


<table> 


Defines a table 


<th> 


Defines a table header 


<tr> 


Defines a table row 


<td> 


Defines a table cell 


<caption> 


Defines a table caption 


<colgroup> 


Defines groups of table columns 


<col> 


Defines the attribute values for one or 
more columns in a table 


<thead> 


Defines a table head 


<tbody> 


Defines a table body 


<tfoot> 


Defines a table footer 
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HTML LISTS 



In This Chapter 

□ Unordered Lists 

□ Ordered Lists 

□ Definition Lists 

□ Nested Lists 



Unordered Lists 



HTML supports ordered, unordered, and definition lists. You can also nest one list 
within another. 

An unordered list is a list of items. The list items are marked with bullets (typically 
small black circles), as shown in Figure 12.1. 



« Tutorials 



HTML & CSS 

REFERENCES 

• HTML 4 Tag Reference 

• HTML 4 Event Reference 

• HTML 5 Tag Reference 

• HTML Color Reference 

• HTML Color Picker 

• HTML Color Mixer 

• XHTML Tag Reference 

• CSS Reference 



Figure 12.1 
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An unordered list starts with the <ul > tag. Each list item starts with the <1 i > tag. 
Figure 12.2 displays how it looks in a browser. 



Try it yourself » 



<html> 
<body> 

<h4>An unordered List:</h4> 
<ul> 

<1 i >cof f ee</l i > 

<1 i>Tea</l i> 

<li>Milk</li> 
</ul> 

</body> 
</html> 



Am Unordered Left 

• Coffee 

• Tea 

• Milk 

Figure 12.2 



Inside a list item, you can put paragraphs, line breaks, images, links, other lists, and 
so on. 

You can display different kinds of bullets in an unordered list by using the type 
attribute. Figure 12.3 shows lists marked with discs, circles, and squares. 



Try it yourself » 



<html> 
<body> 

<h4>Disc bullets list:</h4> 
<ul type= ,, disc"> 

<1 i>Appl es</l i> 

<1 i>Bananas</l i> 

<1 i> Lemon s</l i> 
</ul> 

(continued) 
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(continued) 
<h4>Circle bullets list:</h4> 
<ul type="ci rcle"> 

<1 i>Appl es</l i> 

<1 i>Bananas</l i> 

<1 i>Lemons</l i> 
</ul> 

<h4>Square bullets list:</h4> 
<ul type= ,, square"> 

<1 i>Appl es</l i> 

<1 i>Bananas</l i> 

<1 i>Lemons</l i> 
</ul> 

</body> 
</html> 



Disc bullets list: 

• Apples 

• Bananas 

• Lemons 

Orel* billets list: 

o Apples 
o Bananas 
9 Lemons 

Squre billets list: 

■ Apples 

■ Bananas 

■ Lemons 

Figure 12.3 
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Ordered Lists 

An ordered list is also a list of items; the list items are numbered sequentially rather 
than bulleted. 

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. 
Figure 12.4 shows how the ordered list appears in the browser. 



Try it yourself » 



<html> 
<body> 

<h4>An Ordered List:</h4> 
<ol> 

<1 i >cof f ee</l i > 

<1 i>Tea</l i> 

<li>Milk</li> 
</ol> 

</body> 
</html> 



Am Ordered List; 

1. Cofee 

2. Tea 

3. MOk 

Figure 12.4 



Different Types of Ordering 

You can display different kinds of ordered lists by using the type attribute. Figure 
12.5 shows lists marked with uppercase and lowercase letters; Figure 12.6 shows 
lists with uppercase and lowercase Roman numerals. 



Try it yourself » 



<html> 
<body> 

(continued) 
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(continued) 
<h4>Letters list:</h4> 

<ol type= ,, A"> 

<1 i>Appl es</l i> 

<1 i>Bananas</l i> 

<1 i>Lemons</l i> 
</ol> 

<h4>Lowercase letters list:</h4> 
<ol type= ,, a"> 

<1 i>Appl es</l i> 

<1 i>Bananas</l i> 

<1 i>Lemons</l i> 
</ol> 

</body> 
</html> 



Letters bst: 

A, Apples 

C. Lemons 
Lowercase letters list: 

a. Apples 

c. Lemons 
Figure 12.5 



Try it yourself » 



<html> 
<body> 

<h4>Roman numbers list:</h4> 
<ol type= ,, i"> 

<1 i>Appl es</l i> 

<1 i>Bananas</l i> 

<1 i>i_emons</li> 
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</ol> 

<h4>Lowercase Roman numbers list:</h4> 
<ol type= ,, i"> 

<1 i>Appl es</l i> 

<1 i>Bananas</l i> 

<1 i>Lemons</l i> 
</ol> 

</body> 
</html> 



Roman umbers ftstz 

L Apples 
II T Bananas 
m. Lemons 

Lowercase Roman numbers fist: 

L Apples 
il Bananas 
itL Lemons 

Figure 12.6 



Definition Lists 

A definition list is not a list of single items. It is a list of items (terms), together with 
a description of each item (term). 

A definition list starts with a <dl > tag (definition list). 

Each term starts with a <dt> tag (definition term). 

Each description starts with a <dd> tag (definition description). 

Figure 12.7 shows how the definition list in the following example appears in a 
browser. 



95 



Learn HTML and CSS with w3schools 



Try it yourself » 



<html> 
<body> 

<h4>A Definition List:</h4> 
<dl> 

<dt>Coffee</dt> 

<dd>Black hot drink</dd> 

<dt>Mi 1 k</dt> 

<dd>white cold drink</dd> 
</dl> 

</body> 
</html> 



A Definition List; 
Coffee 

Black hot drink 

Milk 

White cold drink 
Figure 12.7 



Inside the <dd> tag you can put paragraphs, line breaks, images, links, other lists, 
and so on. 

Nested Lists 

A nested list is a list within another list. Usually the second list is indented another 
level and the item markers will appear differently than the original list, as shown in 
Figure 12.8. 



Try it yourself » 



<html> 
<body> 

<h4>A nested List:</h4> 
<ul> 

<1 i>Coffee</l i> 
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<1 i>Tea 
<ul> 

<li>Black tea</li> 
<li>Green tea</li> 
</ul> 
</li> 

<li>Milk</li> 
</ul> 

</body> 
</html> 



A Bested List: 

• Coffee 

• Tea 

o Black tea 
o Green tea 
■ MiDc 

Figure 12.8 



Nested lists can be several levels deep, as shown in Figure 12.9. 



Try it yourself » 



<html> 
<body> 

<h4>A nested List:</h4> 
<ul> 

<1 i >cof f ee</l i > 

<1 i>Tea 
<ul> 

<li>Black tea</li> 
<li>Green tea 
<ul> 

<1 i>Chi na</l i> 
<1 i>Af ri ca</l i> 
</ul> 
</li> 

</u 1 > ( continued) 
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(continued) 

</1i> 

<li>Milk</li> 
</ul> 

</body> 
</html> 



A Bested List: 

• Coffee 

• Tea 

o Black tea 
o Green tea 

■ China 

■ Afrka 

• MOk 

Figure 12.9 



List Tags 



TAG 


DESCRIPTION 


<ol> 


Defines an ordered list 


<ul> 


Defines an unordered list 


<li> 


Defines a list item 


<dl> 


Defines a definition list 


<dt> 


Defines a term (an item) in a defini- 
tion list 


<dd> 


Defines a description of a term in a 
definition list 


<dir> 


Deprecated. Use <ul> instead 


<menu> 


Deprecated. Use <ul> instead 
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CHAPTER 13 

HTML FORMS 
& INPUT 



In This Chapter 

□ Forms 

□ input Tag and Attributes 

□ action Attribute 

□ Form Examples 

Forms 

HTML forms are used to collect different kinds of user input. A form is an area that 
can contain form elements. 

Form elements are elements that allow the user to enter information in a form (like 
text fields, text area fields, drop-down menus, radio buttons, check boxes, and so 
on). 

A simple form example appears in Figure 13.1. 



Tbis form sends an e-mail to w3schooLs. 

Name: 

lyoumame 
Mail 

[youtmail 

Comment; 

yourcomment 

1 Send ] [ Reset | 



Figure 13.1 



99 



Learn HTML and CSS with w3schools 

A form is defined with the <f orm> tag: 
<form> 

input elements 
</form> 

input Tag and Attributes 

The most used form tag is the <i nput> tag. The type of input is specified with 
the type attribute. The following types are the most commonly used input types. 

Text Fields 

Text fields are used when you want the user to type letters, numbers, and so on in 
a form. The form appears as shown in Figure 13.2. Note that the form itself is not 
visible. 



Try it yourself » 



<html> 
<body> 

<form action= ,,M > 
First name: 

<input type= ,, text" name= ,, firstname" /> 
<br /> 
Last name: 

<input type= ,, text" name="l astname" /> 
</form> 

</body> 
</html> 



First name: 
Last name: 

Figure 13.2 
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In most browsers, the width of the text field is 20 characters by default. 



Check Boxes 

This example demonstrates how to create check boxes on an HTML page like the 
ones shown in Figure 13.3. A user can select or deselect a check box. 



Try it yourself » 



<html> 
<body> 

<form action= ,,M > 
I have a bike: 

<input type= ,, checkbox" name="vehi cl e" val ue="Bi ke"> 
<br /> 

I have a car: 

<input type= ,, checkbox" name="vehi cl e" val ue= ,, Car"> 
<br /> 

I have an ai rplane: 

<input type= ,, checkbox" name="vehi cl e" val ue="Ai rpl ane"> 
</form> 

</body> 
</html> 



Ifaaveabikc: □ 

I have a car □ 

I hove an airplane: D 

Figure 13.3 
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Radio Buttons 

The example demonstrated in Figure 13.4 shows how to create radio buttons on an 
HTML form. When a user clicks a radio button, that button becomes selected, and 
all other buttons in the same group become deselected. 



Try it yourself » 



<html> 
<body> 

<form acti on= ,,M > 
Male: 

<input type=" radio" checked= ,, checked" 
name= ,, Sex" val ue="mal e"> 
<br> 
Femal e : 

<input type=" radio" 
name="Sex" val ue="femal e"> 
</form> 

</body> 
</html> 



Male: 0 
Female; O 

Figure 13.4 



Drop-Down List 

The next example shows how to create a simple drop-down list on an HTML page. 
A drop-down list is a selectable list. 



Try it yourself » 



<html> 
<body> 

<form action=""> 
<select name="cars"> 
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<opti on val ue=" vol vo">vol vo</opti on> 
<opti on val ue= ,, saab">Saab</opti on> 
<opti on val ue= ,, fiat">Fi at</opti on> 
<opti on val ue="audi ">Audi </opti on> 
</sel ect> 
</form> 

</body> 
</html> 



Saab 

Fiat 

Audi 

Figure 13.5 



You can also display a simple drop-down list with a value preselected on the list, as 
shown in Figure 13.6. 



Try it yourself » 



<html> 
<body> 

<form acti on= ,,M > 

<select name= ,, cars"> 

<opti on val ue=" vol vo">vol vo</opti on> 

<opti on val ue= ,, saab">Saab</opti on> 

<option val ue= ,, fiat" sel ected="sel ected">Fi at</opti on> 
<option value="audi ">Audi</opti on> 
</sel ect> 
</form> 

</body> 
</html> 



| Rat ai| 

Figure 13.6 
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Text Area 

Using a textarea (a multiline text input control) like the one in Figure 13.7, you can 
write an unlimited number of characters. A textarea can be in a form or elsewhere 
on a page. 



Try it yourself » 



<html> 
<body> 



<textarea rows= ,, 10" cols= ,, 30"> The cat was playing in the 
garden. </textarea> 



</body> 
</html> 




Figure 13.7 



Buttons 

Buttons are common items on a form. This example demonstrates how to create a 
button. You can define your own text on the face of the button. The results of this 
code appear in Figure 13.8. 



Try it yourself » 



<html> 
<body> 

<form action= ,,M > 

<input type= ,, button" val ue="Hel lo world !"> 
</form> 
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</body> 
</html> 



1 Hello wofidT] 
Figure 13.8 



Fieldset 

A fieldset is a grouping of data fields. This example demonstrates how to draw a 
border with a caption around your data, as shown in Figure 13.9. 



Try it yourself » 



<html> 
<body> 

<fieldset> 
<1 egend> 

Health information: 

</l egend> 

<form action= ,,M > 

Height <input type= ,, text" size= ,, 3"> 
weight <input type= ,, text" size= ,, 3"> 
</form> 
</fieldset> 

<P> 

if there is no border around the input form, your browser is 
too old. 

</p> 

</body> 
</html> 



Health irfbrmatioa 
HeigfcQ Weight 



If there is no border around the input form, your browser is too old 
Figure 13.9 
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action Attribute 

When the user clicks the Submit button, the content of the form is sent to the 
server. The form's acti on attribute defines the name of the file to send the con- 
tent to. The file defined in the action attribute usually does something with the 
received input. 

<form name="i nput" acti on="html_form_submit. asp" 
method= ,, get"> 

username : 

<input type= ,, text" name= ,, user" /> 
<input type="submi t" val ue="Submi t" /> 
</form> 

Figure 13.10 shows how it looks in a browser. If you type some characters in the 
text field and click the Submit button, the browser sends your input to a page called 
"html_form_submit.asp M . The page will show you the received input. 



Username: [ Submrl ] 

Figure 13.10 



Form Examples 

This example demonstrates how to add a form to a page. The form contains two 
input fields and a Submit button. The resulting form appears in Figure 13.1 1. 



Try it yourself » 



<html> 
<body> 

<form name="i nput" acti on="html_form_acti on . asp" 
method="get"> 

Type your first name: 

<input type="text" name="Fi rstName" val ue="Mi ckey" size="20"> 
<br>Type your last name: 

<input type="text" name="i_astName" val ue="Mouse" size="20"> 
<br> 

<input type="submi t" val ue="Submi t"> 
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</form> 



<P> 

if you click the "Submit" button, you will send your input 
to a new page called html_form_action.asp. 

</p> 



</body> 
</html> 



Type your first name: 
Type your last name: | 


Mickey | 
Mouse | 


Submit ] 




If you dick the "Submit" button, you vlqH send your input to a new page called 
hinJ_f orm_adioiL asp . 



Figure 13.11 



Form with Check Boxes 

The following form contains three check boxes and a Submit button. The results of 
the code appear in Figure 13.12. 



Try it yourself » 



<html> 
<body> 



<form name="i nput" acti on="html_form_acti on . asp" 
method="get"> 

I have a bike: 

<input type="checkbox" name="vehi cl e" val ue="Bi ke" 
checked="checked" /> 

<br /> 

I have a car: 

<input type="checkbox" name="vehi cl e" val ue="Car" /> 
<br /> 

I have an ai rplane: 

<input type="checkbox" name="vehi cl e" val ue="Ai rpl ane" /> 
<br /xbr /> 

<input type="submit" val ue="Submi t" /> 
</form> 



(continued) 
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(continued) 
<P> 

if you click the "Submit" button, you send your input to a 
new page called html_form_acti on . asp . 

</p> 

</body> 
</html> 



I have a biker El 

I have a car O 

I have an airplane: □ 

[ Submit ] 

If you click the "Submit* button, you send your input to a new page called 
htad^form^actknLasp- 

Figure 13.12 



Form with Radio Buttons 

Figure 13.13 displays a form with two radio buttons and a Submit button. 



Try it yourself » 



<html> 
<body> 

<form name="i nput" acti on="html_form_acti on . asp" 
method="get"> 

Male: 

<input type=" radio" name="Sex" val ue="Mal e" 
checked="checked"> 

<br> 

Femal e : 

<input type=" radio" name="Sex" val ue="Femal e"> 
<br> 

<input type ="submit" value ="Submi t"> 
</form> 

<P> 

if you click the "Submit" button, you will send your input 
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to a new page called html_form_action.asp. 

</p> 

</body> 
</html> 



Mak- 0 






Female: O 






[ Submit ] 






Ifyoudkkthe*Suli 


□at* button, you will send your input to an 


ew page called 


html_foiiii_aclioiLas 


P- 











Figure 13.13 



Send E-Mail from a Form 

The next example demonstrates how to send e-mail from a form. The results of the 
code appear in Figure 13.14. 



Try it yourself » 



<html> 
<body> 

<form acti on="MAlLTO: someone@w3school s . com" method= ,, post" 
enctype="text/pl ai n"> 

<h3>This form sends an e-mail to w3School s .</h3> 
Name:<br> 

<input type= ,, text" name= ,, name" 
val ue= ,, yourname" size= ,, 20"> 
<br> 

Mai 1 :<br> 

<input type= ,, text" name="mai 1 " 
value= ,, yourmail" size= ,, 20"> 
<br> 

Comment :<br> 

<input type= ,, text" name= ,, comment" 
val ue= ,, yourcomment" si ze= ,, 40"> 
<brxbr> 

<input type="submi t" val ue= ,, Send"> 
<input type=" reset" val ue="Reset"> 



(continued) 
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(continued) 

</form> 
</body> 
</html> 

This form sends an e-mail to W3Scbools- 

Name; 

iyourname 

MaiL 

yourmaj 

C onun Cflt 

yourcommem | 



| Send ) [ Reset j 



Figure 13.14 


Form Tags 


TAG 


DESCRIPTION 


<form> 


Defines a form for user input 


<input> 


Defines an input field 


<textarea> 


Defines a textarea (a multiline text input control) 


<label> 


Defines a label to a control 


<fieldset> 


Defines a fieldset 


<legend> 


Defines a caption for a fieldset 


<select> 


Defines a selectable list (a drop-down box) 


<optgroup> 


Defines an option group 


<option> 


Defines an option in the drop-down box 


<button> 


Defines a pushbutton 


<isindex> 


Deprecated. Use <i nput> instead 
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In This Chapter 



□ 


Color Values 


□ 


16 Million Different Colors 


□ 


Web Standard Color Names 


□ 


Color Names Supported by All Browsers 


□ 


Web Safe Colors? 


□ 


Shades of Gray 



Color Values 

HTML colors are defined using a hexadecimal (hex) notation for the combination 
of Red, Green, and Blue color values (RGB). The lowest value that can be given to 
one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). 

Hex values are written as three double-digit numbers, starting with a # sign, such 
as #9ACD32. 

E Because this book is not printed in full color, it may be hard to see the 
some of the examples displayed in this chapter. You may want to consult 
the www.w3schools.com/html site to study working with color in HTML 
more closely. 

The results of these codes are shown in Figure 14.1. 



Color Values 



COLOR 


COLOR HEX 


COLOR RGB 


Black 


#000000 


rgb(0,0,0) 


Red 


#FF0000 


rgb(255,0,0) 


Green 


#00FF00 


rgb(0,255,0) 


Blue 


#0000FF 


rgb(0,0,255) 


Yellow 


#FFFF00 


rgb(255,255,0) 


Cyan 


#00FFFF 


rgb(0,255,255) 



(continued) 



in 
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(continued) 



Magenta 


#FFOOFF 


rgb(255,0,255) 


Gray 


#COCOCO 


rgb(192,192,192) 


White 


#FFFFFF 


rgb(255,255,255) 



Try it yourself » 



<html> 
<body> 

<p styl e="backg round-col or : #C0C0C0"> 
Color set by using hex value 

</p> 

<p styl e="backg round-col or : rgb (192 , 192 , 192) "> 
Color set by using rgb value 

</p> 



<p styl e="backg round-col or : gray"> 
Color set by using color name 

</p> 

</body> 
</html> 



Color set by using hex value 

Color set by using rgb vake 

Color set by using color 
Figure 14.1 




16 Million Different Colors 

The combination of Red, Green and Blue values from 0 to 255 gives you a total of 
more than 16 million colors to play with (256 x 256 x 256). Most modern monitors 
are capable of displaying at least 16,384 colors. 

If you look at the color table at http://www.w3schools.com/html/html_colors.asp, 
you will see the result of varying the red light from 0 to 255, while keeping the 
green and blue light at zero. 
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Web Standard Color Names 

The World Wide Web Consortium (W3C) has listed 16 valid color names for 
HTML and CSS: 

Aqua 

Black 

Blue 

Fuchsia 

Gray 

Green 

Lime 

Maroon 

Navy 

Olive 

Purple 

Red 

Silver 

Teal 

White 

Yellow 

If you want to use other colors, you should specify their HEX values. 



Color Names Supported by All 
Browsers 

The W3C HTML and CSS standards have listed only 16 valid color names. How- 
ever, a collection of nearly 150 color names are supported by all major browsers. 

EThe complete list of color names supported by all major browsers is 
available on the w3schools Web site: http://www.w3schools.com/html/ 
html_colornames . asp . 



These additional names are not a part of the W3C Web standard. If you 
want valid HTML or CSS, use the HEX values instead. 
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Web Safe Colors? 

Some years ago, when computers supported a maximum of 256 different colors, a 
list of 216 "Web Safe Colors" was suggested as a Web standard, reserving 40 fixed 
system colors. This cross-browser color palette was created to ensure that all com- 
puters would display the colors correctly when running a 256-color palette. This 
is not important now, because most computers can display millions of different 
colors. 

EThe complete list of Web Safe Colors is found at http://www.w3schools. 
com/html/html_colors . asp . 



Shades of Gray 

Gray colors are displayed using an equal amount of power to all of the light sources. 
To make it easier for you to select the right gray color, we have compiled the follow- 
ing table of gray shades. 

EYou will find the same table of gray shades at http://www.w3schools.com/ 
html/html_colors . asp . \ 




COLOR HEX 



#000000 



#080808 



#101010 



#181818 



#202020 



#282828 



#303030 



#383838 



#404040 



#484848 



COLOR RGB 



rgb(0,0,0) 



rgb(8,8,8) 



rgb(16,16,16) 



rgb(24,24,24) 



rgb(32,32,32) 



rgb(40,40,40) 



rgb(48,48,48) 



rgb(56,56,56) 



rgb(64,64,64) 



rgb(72,72,72) 



#505050 



rgb(80,80,80) 



#585858 



rgb(88,88,88) 



#606060 



rgb(96,96,96) 



#686868 



rgb(104,104,104) 



#707070 



rgb(l 12,1 12,1 12) 



#787878 



rgb(120,120,120) 



#808080 



rgb(128,128,128) 
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#888888 


rgb(136,136,136) 




#909090 


rgb(l44,l44,l44) 




#989898 


rgb(152,152,152) 




#A0A0A0 


rgb(160,160,160) 




#A8A8A8 


rgb(168,168,168) 




#B0B0B0 


rgb(176,176,176) 




#B8B8B8 


rgb(184,184,184) 




#C0C0C0 


rgb(192,192,192) 




#C8C8C8 


rgb(200,200,200) 




#D0D0D0 


rgb(208,208,208) 




#D8D8D8 


rgb(2 16,2 16,2 16) 




#E0E0E0 


rgb(224,224,224) 




#E8E8E8 


rgb(232,232,232) 




#F0F0F0 


rgb(240,240,240) 




#F8F8F8 


rgb(248,248,248) 




#FFFFFF 


rgb(255,255,255) 
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The following is an HTML Quick List from the first half of this book. 

You can view or print this quick list from the w3schools Web site at www. 
w3 schools . com/html/html_quick. asp 



HTML Basic Document 

<html> 
<head> 

<title>Document name goes here</title> 

</head> 

<body> 

visible text goes here 

</body> 

</html> 



Heading Elements 

<hl>l_argest Heading</hl> 
<h2> . . . </h2> 
<h3> . . . </h3> 
<h4> . . . </h4> 
<h5> . . . </h5> 
<h6>Smal 1 est Heading</h6> 

Text Elements 

<p>This is a paragraph</p> 

<br /> (line break) 

<hr /> (horizontal rule) 

<pre>This text is preformatted</pre> 
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Logical Styles 

<em>This text is emphasi zed</em> 
<strong>This text is strong</strong> 
<code>This is some computer code</code> 



Physical Styles 

<b»This text is bold</b> 
<i>This text is italic</i> 



Links, Anchors, and Image Elements 

<a href="http ://www. exampl e . com/">Thi s is a Link</a> 

<a href= ,, http://www.example.com/ ,, ximg src= ,, URL" 
alt="Alternate Text"x/a> 

<a href= ,, mailto:webmaster@example.com ,, >Send e-mail </a> 
A named anchor: 

<a name="ti ps">useful Tips Section</a> 

<a href="#ti ps">Jump to the Useful Tips Section</a> 



Unordered (Bulleted) List 

<ul> 

<li>First item</li> 
<li>Next item</li> 
</ul> 



Ordered (Numbered) List 

<ol> 

<li>First item</li> 
<li>Next item</li> 
</ol> 
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Definition List 

<dl> 

<dt>Fi rst term</dt> 
<dd>Defini ti on</dd> 
<dt>Next term</dt> 
<dd>Defini ti on</dd> 
</dl> 



Tables 

<table border= ,, l"> 
<tr> 

<th>someheader</th> 

<th>someheader</th> 

</tr> 

<tr> 

<td>sometext</td> 

<td>sometext</td> 

</tr> 

</table> 



Frames 

<frameset col s="25%, 75%"> 
<frame src="pagel. htm"> 
<frame src="page2 . htm"> 

</f rameset> 



Forms 

<form action="http: //www. example. com/test .asp" method="post/ 
get"> 

<input type= ,, text" name="l astname" val ue="Ni xon" size= ,, 30" 
maxlength= ,, 50"> 

<input type= ,, password"> 

<input type= ,, checkbox" checked= ,, checked"> 

<input type=" radio" checked="checked"> 
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<input type="submi t"> 
<input type= ,, reset"> 
<input type= ,, hidden"> 

<select> 
<option>Apples 

<opti on sel ected="sel ected">Appl es</opti on> 
<option selected>Bananas 

<opti on sel ected="sel ected">Bananas</opti on> 

<option>Cherries 

<opti on>cher ri es</opti on> 

</sel ect> 

<textarea name= ,, Comment" rows= ,, 60" col s= ,, 20 ,, x/textarea> 
</form> 



Entities 

< is the same as < 
> is the same as > 
© is the same as © 



Other Elements 

<!-- This is a comment --> 
<blockquote> 

Text quoted from some source. 
</blockquote> 

<address> 
Address l<br> 
Address 2<br> 
Ci ty<br> 
</address> 

Sou rce : http : //www . w3school s . com/html /html_qui ck . asp . 
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□ Chapter 1 6: HTML Layout 

□ Chapter 17: HTML Frames 

□ Chapter 1 8: HTML Fonts 

□ Chapter 19: Why Use HTML 4.0? 

□ Chapter 20: HTML CSS Styles 

□ Chapter 21 : HTML Character Entities 

□ Chapter 22: HTML Head & Meta Elements 
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□ Chapter 24: HTML Scripts 
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□ Chapter 27: HTML URL Encoding 

□ Chapter 28: Turn Your PC Into a Web Server 

□ Chapter 29: HTML & CSS Summary 
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HTML LAYOUT 



In this Chapter 

□ HTML Layout Using Tables 

Everywhere on the Web, you find pages that are formatted like newspaper pages 
using HTML columns. One very common practice with HTML is to use HTML 
tables to format the layout of an HTML page. 



HTML Layout Using Tables 



A part of this page is formatted with 
two columns, like a newspaper page. 

As you can see on this page, there is 
a left column and a right column. 

This text is displayed in the left col- 



An HTML <table> is used to 
divide a part of this Web page into 
two columns. 

The trick is to use a table without 
borders, and maybe a little extra cell 
padding. 

No matter how much text you add 
to this table, it will stay inside its 
column borders. 



f 1 For more information about creating and formatting tables, see "Chapter 

1 11, "HTML Tables." 

Dividing a part of an HTML page into table columns is very easy to do. Just set it 
up like the following example. The results are shown in Figure 16.1. 



Try it yourself » 



<html> 
<body> 



<table border= ,, 0" wi dth= ,, 100%" eel 1 paddi ng= ,, 10"> 
<tr> 



(continued) 
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(continued) 
<td width= ,, 50%" val i gn= ,, top"> 

This is some text. This is some text. This is some text. 
This is some text. This is some text. 

</td> 

<td width= ,, 50%" val i gn= ,, top"> 

Another text. Another text. Another text. Another text. An- 
other text. Another text. Another text. 

</td> 



</tr> 
</table> 

</body> 
</html> 



This is some text This is some t 


ext Another text Another text. 


This is some text. This is some 1 


ext. Another text. Another text. 


This is some text 


Another text Another text 




Another text. 



Figure 16.1 
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In This Chapter 

□ frameset Tag 

□ frame Tag 

□ Designing with Frames 

With frames, you can display more than one HTML document in the same browser 
window. Each HTML document is called a frame, and each frame is independent 
of the others. 

The disadvantages of using frames are: 

The web developer must keep track of more HTML documents. 

It is difficult to print the entire page. 

Users often dislike them. 

It presents linking challenges. 

People often use frames to wrap their own ads and branding around other 
people's content 

frameset Tag 

The <f rameset> tag defines how to divide the window into frames. Each frame- 
set defines a set of rows or columns. The values of the rows/columns indicate the 
amount of screen area each row/column will occupy. 

Vertical Frameset 

The following example demonstrates how to make a vertical frameset with three 
different documents. The results of the sample code appear in Figure 17.1 
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Try it yourself » 



<html> 

<frameset col s="25%, 50%, 25%"> 
<frame src="f rame_a. htm"> 
<frame src="f rame_b. htm"> 
<frame src="f rame_c . htm"> 

</f rameset> 

</html> 




Frame B 



Frame C 



Figure 17.1 



Note that the code does not use the <body> tag when a <f rame- 
set> tag is in use. 



Horizontal Frameset 

The following example demonstrates how to make a horizontal frameset with three 
different documents. The results of the sample code appear in Figure 17.2 
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Try it yourself » 



<html> 

<frameset rows="25%, 50%, 25%"> 
<frame src="f rame_a. htm"> 
<frame src="f rame_b. htm"> 
<frame src="f rame_c . htm"> 

</f rameset> 

</html> 



Frame A 



Frame B 



Frame C 



Figure 17.2 



frame Tag 

The <f rame> tag defines which HTML document will initially open in each frame. 

In the following example, as shown in Figure 17.3, we have a frameset with two 
columns. The first column is set to 25% of the width of the browser window. The 
second column is set to 75% of the width of the browser window. The HTML 
document frame_a.htm is put into the first column, and the HTML document 
frame_b.htm is put into the second column. 
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Try it yourself » 



<frameset col s="25%, 75%"> 
<frame src="f rame_a. htm"> 
<frame src="f rame_b . htm"> 

</f rameset> 



Frame A 



Frame B 



Figure 17.3 



The frameset column size value can also be set in pixels 
(col s="200 , 500"), and one of the columns can be set to use the remaining 
space (cols= ,, 25%,*"). 



Designing with Frames 

If a frame has visible borders, the user can resize it by dragging the border. To pre- 
vent a user from doing this, you can add noresi ze="noresi ze" to the <f rame> 
tag. 



noframesTag 

Although they are less common these days, it's a good idea to add the <nof rames> 
tag for older or text-based browsers that do not support frames. 
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You cannot use the <body> tags together with the <f rameset> tags. However, if 
you add a<noframes> tag containing some text for browsers that do not support 
frames, you will have to enclose the text in <body> tags. See how it is done in the 
following example. The results of this code appear in Figure 17.4. 



Try it yourself » 



<html> 

<frameset col s="25%, 50%, 25%"> 
<frame src="f rame_a. htm"> 
<frame src="f rame_b. htm"> 
<frame src="f rame_c . htm"> 

<nof rames> 

<body>Your browser does not handle frames ! </body> 
</nof rames> 

</f rameset> 

</html> 



(This browser supports frames, so the noframes text remains invisible.) 



Frame A Frame B 



Frame C 



Figure 17.4 
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Mixed Frameset 

The following example demonstrates how to make a frameset with three documents 
and how to mix them in rows and columns, as shown in Figure 17.5. 



Try it yourself » 



<html> 

<frameset rows="50%, 50%"> 

<frame src="f rame_a. htm"> 

<frameset col s="25%, 75%"> 
<frame src="f rame_b . htm"> 
<frame src="f rame_c . htm"> 
</f rameset> 



</f rameset> 
</html> 



Frame A 


Frame B 


Frame C 



Figure 17.5 
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noresize Attribute 

This example demonstrates the noresize attribute. The frames are not resizable. 
Unlike other frames, if you move the mouse over the borders between the frames, 
you will notice that you cannot drag or move the frame borders. 



Try it yourself » 



<html> 

<frameset rows="50%, 50%"> 

<frame noresi ze="noresi ze" src="f rame_a. htm"> 
<frameset col s="25%, 75%"> 

<frame noresi ze="noresi ze" src="f rame_b. htm"> 

<frame noresi ze="noresi ze" src="f rame_c . htm"> 

</f rameset> 

</html> 



Navigation Frame 

This example demonstrates how to make a navigation frame. A navigation frame 
contains a list of links with the second frame as the target. The second frame will 
show the linked document. A sample navigation frame appears in Figure 17.6. 



Try it yourself » 



<html> 

<frameset col s="120 , *"> 

<f rame src="tryhtml_contents . htm"> 

<frame src="f rame_a. htm" name="showf rame"> 

</f rameset> 

</html> 
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Frame A 



Figure 17.6 



In the first column, the file called tryhtml_contents.htm contains links to three 
documents on the w3schools.com Web site. The source code for the links: 

<a href ="f rame_a. htm" target ="showf rame"> Frame a</axbr> 
<a href ="f rame_b . htm" target ="showf rame">Frame b</axbr> 
<a href ="f rame_c . htm" target ="showf rame">Frame c</a> 

Inline Frame 

Frames can also be used within a single HTML page. These are known as inline 
frames. The following example demonstrates how to create an inline frame like the 
one that appears in Figure 17.7. 



Try it yourself » 



<html> 
<body> 

<i frame s rc="def aul t . asp"x/i f rame> 

<p>Some older browsers don't support iframes.</p> 
<p>if they don't, the i frame will not be vi si bl e .</p> 
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</body> 
</html> 



in3schools.com 


HOME HTML CSS X 


HL JAVASCRIPT 


BtiS 1 WtB nus 1 IMtj 





Same older browsers don't support [frames 
If they don't, the iframe wiD not be -visible. 
Figure 17.7 



Jump to 

This example demonstrates two frames. One of the frames has a source to a speci- 
fied section in a file. The specified section is made with <a name= ll ClO"> in the 
link.htm file. The result is shown in Figure 17.8. 



Try it yourself » 



<html> 

<frameset col s="20%, 80%"> 
<frame src="f rame_a. htm"> 
<frame src="l i nk. htm#ClO"> 

</f rameset> 

</html> 
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Frame A 


v II<i[JltI 1U 






This chapter explains ba bla bla 












1ms chapter explains ba bla bla 






t^iiapier iz 






This chapter explains ba bla bla 
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Figure 17.8 



Jump to a Specified Section 

This example demonstrates two frames. The navigation frame (content.htm) to the 
left contains a list of links with the second frame (link.htm) as a target on the right. 
The second frame shows the linked document. The result is shown in Figure 17.9. 



Try it yourself » 



<html> 

<frameset col s="180 , *"> 

<frame src="content . htm"> 

<frame src="l i nk. htm" name="showf rame"> 

</f rameset> 

</html> 
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Link without Anchor 




1 


Link with Anchor 








This chapter explains ba bla bla 












THs chapter explains ba bla bla 












This chapter explains ba bla bla 
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This chapter explains ba bla bla 
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Figure 17.9 



One of the links in the navigation frame is linked to a specified section in the target 
file. The HTML code in the file content.htm looks like this: 

<a href ="1 i nk. htm" target ="showf rame">Li nk without Anchor</ 
axbrxa href ="1 i nk. htm#ClO" target ="showf rame">Li nk 
with Anchor</a>. 

Frame Taos 



TAG 


DESCRIPTION 


<frameset> 


Defines a set of frames 


<frame> 


Defines a sub window (a frame) 


<noframes> 


Defines a noframe section for browsers that do not handle 
frames 


<iframe> 


Defines an inline sub window (frame) 
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HTML FONTS 



In This Chapter 

□ font Tag 

□ font Attributes 

□ Controlling Fonts with Styles 



NOTE 



The <f ont> tag in HTML is deprecated. It is supposed to be removed 
in a future version of HTML Even if a lot of people are using it, you should try to avoid 
it and use styles instead. The tag is explained here to help you understand it if you 
see it used elsewhere on the Web. 



font Tag 

With HTML code like the following example, you can specify both the size and the 
type of the browser output. You can see what the results look like in Figure 18.1. 



Try it yourself » 



<p> 

<font size= ,, 2" face= ,, verdana"> 
This is a paragraph. 

</font> 

</p> 

<P> 

<font size= ,, 3" face= ,, Times"> 
This is another paragraph. 
</font> 
</p> 

This is a paragraph. 
This is another paragraph. 

Figure 18.1 
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Font Attributes 



A TTT") TD T TTT7 

Al 1R1BU 1L 


LXAMPLL 


T»T T"T> T»/^\CT7 


size= M number" 


size="2" 


Defines the font size 


size="+number M 


size="+l" 


Increases the font size 


size=" -number" 


M -l M 

size= -1 


Decreases the font size 


face= "face-name" 


face= "Times" 


Defines the font name 


color= "color-value" 


color="#eeff00" 


Defines the font color 


color= "color-name" 


color="red" 


Defines the font color 



Controlling Fonts with Styles 

Although it's explained here, the <f ont> tag should not be used! The <f ont> tag 
is deprecated in the latest versions of HTML, which you learn more about in the 
next chapter. 

The World Wide Web Consortium (W3C), an organization that creates and sets 
standards for the Web, has removed the <f ont> tag from its recommendations. In 
future versions of HTML, style sheets (CSS) will be used to define the layout and 
display properties of HTML elements. 

Font 

This example demonstrates how to set the font of a text, as shown in Figure 18.2. 



Try it yourself » 



<html> 
<body> 

<hl styl e="font-fami ly : verdana">A headi ng</hl> 
<p style= ,, font-family:courier">A paragraph</p> 
</body> 
</html> 



A heading 

A paragraph 
Figure 18.2 
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Font Size 

This example demonstrates how to set the font size of a text, as shown in Figure 
18.3. 



Try it yourself » 



<html> 
<body> 

<hl style= ,, font-size:150%">A headi ng</hl> 
<p style= ,, font-size:80%">A paragraph</p> 
</body> 
</html> 



A heading 

A paragraph 
Figure 18.3 



Font Color 

This example demonstrates how to set the color of a text, as shown in Figure 18.4. 



Try it yourself » 



<html> 
<body> 

<hl style="color :blue">A blue headi ng</hl> 
<p style="color: red">A red paragraph</p> 
</body> 
</html> 



A blue heading 

A red paragraph 
Figure 18.4 
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The colors described in the code samples in this chapter are shown in grayscale in 
the figures. To see the full-color sample results, go to: 

^^^^ http://www.w3schools.com/html/html_fonts.asp 

Font, Font Size, and Font Color 

This example demonstrates how to set the font, font size, and font color of a text at 
the same time, as shown in Figure 18.5. 



Try it yourself » 



<html> 
<body> 

<p styl e="f ont-f ami 1 y : verdana ; font-si ze : 80%; col or : g reen"> 

This is a paragraph with some green text in it. This is a 
paragraph with some green text in it. This is a paragraph 
with some green text in it. This is a paragraph with some 
green text in it. 

</p> 

</body> 

</html> 



ThFS is a paragraph with some green text in it. This is a paragraph with 
some green text in it. This is a paragraph with some green text in it. 
This is a paragraph with some green text tn it. 

Figure 18.5 



More About Style Sheets 

The remaining chapters in this book focus on working with styles. In the 
r i k following chapters, we will explain why some tags, like <f ont>, are to be 
^ ^ removed from the HTML recommendations, and how to insert a style 

sheet in an HTML document. 

STo learn more about style sheets, check out Learn CSS with w3schools, 
also from Wiley Publishing, and try the CSS Tutorial at w3schools.com. 
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WHY USE HTML 4.0? 



In This Chapter 

□ HTML 3.2 Was Very Wrong! 

□ Enter HTML 4.0 

HTML 3.2 Was Very Wrong! 

The original HTML was never intended to contain tags for formatting a document. 
HTML tags were intended to define the content of the document like: 

<p>This is a paragraph</p> 
<hl>This is a headi ng</hl> 

When tags like <f ont> and col or attributes were added to the HTML 3.2 spec- 
ification, it started a nightmare for Web developers. Development of large Web 
sites where fonts and color information had to be added to every single Web page, 
became a long, expensive, and unduly painful process. 

Enter HTML 4.0 

In HTML 4.0, all formatting can be removed from the HTML document and 
stored in a separate style sheet. Because HTML 4.0 separates the presentation from 
the document structure, you finally get what you always needed: total control of 
presentation layout without messing up the document content. 

What Should You Do About It? 

Do not use presentation attributes inside your HTML tags if you can avoid 
it. Start using styles! Please read Learn CSS with w3schools to learn more about 
working with style sheets. 

Do not use deprecated tags. Visit the w3schools HTML 4.01 Reference to see 
which tags and attributes are deprecated: 
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http : / / www. w3 schools . com/html/html_reference. asp 



NOTE 



L 



The official HTML 4.01 recommends the use of lowercase tags. 



Validate Your HTML Files as HTML 4.01 

An HTML document is validated against a Document Type Definition (DTD). 
Before an HTML file can be properly validated, a correct DTD must be added as 
the first line of the file. 

The HTML 4.01 Strict DTD includes elements and attributes that have not been 
deprecated or do not appear in framesets: 

<!D0CTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01//EN" 

"http : //www . w3 . o rg/TR/html 4/st ri ct . dtd"> 



The HTML 4.01 Transitional DTD includes everything in the strict DTD plus 
deprecated elements and attributes: 

<!D0CTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Transi ti onal //EN" 
"http : //www. w3 . o rg/TR/html 4/1 oose . dtd"> 



The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus 
frames as well: 

<!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Frameset//EN" 

"http : //www. w3 . org/TR/html 4/f rameset . dtd"> 

Test Your HTML With the W3C Validator 

If you want to check the markup validity of Web documents in HTML, input your 
page address (such as www.w3schools.com) in the box at the Markup Validation 
Service. The Validator is maintained by the W3C. 

http : / / validator. w3 .org/ 



141 



CHAPTER 20 

HTML CSS STYLES 



In This Chapter 

□ Styles in HTML 

□ How to Use Styles 

□ Style Tags 

Styles in HTML 

With HTML 4.0, all formatting can be moved out of the HTML document and 
into a separate style sheet. This makes creating, updating, and maintaining the Web 
site much easier. 

The following example demonstrates how to format an HTML document with 
style information added to the <head> section. The results of the sample code 
appear in Figure 20.1. 



Try it yourself » 



<html> 
<head> 

<style type= ,, text/css"> 
hi {color: red} 
h3 {color: blue} 
</styl e> 

</head> 

<body> 

<hl>This is header l</hl> 
<h3>This is header 3</h3> 
</body> 

</html> 
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This is header 1 

This is header 3 



Figure 20.1 



Nonunderlined Link 

Links are underlined by default in the browser page. The following example dem- 
onstrates how to display a link that is not underlined by default, using a style 
attribute. The results of the sample code appear in Figure 20.2. 



Try it yourself » 



<html> 
<body> 

<a href="l astpage . htm" 
style="text-decoration : none"> 

THIS IS A LINK! 

</a> 

</body> 
</html> 



THIS IS A LINK I 
Figure 20.2 
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Link to an External Style Sheet 

This example demonstrates how to use the <1 i nk> tag to link to an external style 
sheet. The results of the sample code appear in Figure 20.3. 



Try it yourself » 



<html> 
<head> 

<link reWstylesheet" type= ,, text/css" href="styl es . ess" > 
</head> 

<body> 

<hl>i am formatted with a linked style sheet</hl> 

<p>Me too!</p> 

</body> 

</html> 



I am formatted with a linked style 
sheet 

Me too! 



Figure 20.3 



EThe linked style sheets in the sample codes in this chapter are located on 
the w3schools.com server, so the sample code works best if you use the 
Try It Yourself editor. Go to http://www.w3schools.com/html and click 
Try it yourself. 

How to Use Styles 

When a browser reads a style sheet, it formats the document according to the 
instructions in the sheet. There are three types of style sheets: external, internal, 
and inline. 
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External Style Sheet 

An external style sheet is ideal when the style is applied to many pages. With an 
external style sheet, you can change the look of an entire Web site by changing one 
file. Each page must link to the style sheet using the <1 i nk> tag. The <1 i nk> tag 
goes inside the <head> section. 

<head> 

<link rel="styl esheet" type= ,, text/css" href="mystyl e . css"> 
</head> 

Internal Style Sheet 

An internal style sheet should be used when a single document has a unique style. 
You define internal styles in the <head> section with the <styl e> tag. The results 
of the sample code appear in Figure 20.4. 



Try it yourself » 



<head> 

<style type= ,, text/css"> 

body {background-color: gray} 

p {margin-left: 20px} 

</styl e> 

</head> 

<p>The left margin is indented 20 pixels.</p> 



The left margin is indented 20 pack. 



Figure 20.4 
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Inline Styles 

An inline style should be used when a unique style is to be applied to a single occur- 
rence of an element. To use inline styles, you use the styl e attribute in the relevant 
tag. The styl e attribute can contain any CSS property. 

The example shown in Figure 20.5 demonstrates how to change the background 
color and the left margin of a paragraph. 



Try it yourself » 



<p style="color: red; margin-left: 20px"> 

This is a paragraph. It's colored red and indented 20px. 

</p> 



This is a paragraph. It's colored red and indented 20px 
Figure 20.5 



NOTE 



style sheets. 



Read Learn CSS with w3schools to learn more about working with 



Style Tags 



TAG 


DESCRIPTION 


< stylo 


Defines a style definition 


<link> 


Defines a resource reference 


<div> 


Defines a section in a document 


<span> 


Defines a section in a document 


<font> 


Deprecated. Use styles instead 


<basefont> 


Deprecated. Use styles instead 


<center> 


Deprecated. Use styles instead 
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HTML CHARACTER 

ENTITIES 



In This Chapter 

□ Character Entities 

□ Nonbreaking Space 

□ Commonly Used Character Entities 



Character Entities 

Some characters are reserved in HTML. For example, you cannot use the greater 
than or less than signs within your text because the browser could mistake them 
for markup. If you want the browser to actually display these characters, you must 
insert character entities in the HTML source. 

A character entity looks like this: &enti ty_name ; or &#enti ty_number ; 
To display a less than sign, you must write: &1 1 ; or &#60 ; 

The advantage of using an entity name instead of a number is that the name often 
is easier to remember. However, the disadvantage is that browsers may not support 
all entity names (while the support for entity numbers is very good). 

The following example lets you experiment with character entities. The results of 
the code appear in Figure 21.1. 



Try it yourself » 



<html> 
<body> 



<hl>Character Enti ti es</hl> 

<p>Code: &X;</p> 

<P> 



(continued 
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(continued) 

Substitute the "X" with an entity number like "#174" or an 
entity name like "pound" to see the result, use the table 
in the next section to try different character entities. 

</p> 

<p>&cent ;</p> 

<p>®</p> 

<p>&</p> 

</body> 

</html> 



Character Entities 

Codc:&X; 

Substitute the with an entity number Bee "#174" or an entity name like 
"pound" to see the result. Use the table in the next section to by different 
character entities, 

<S> 
& 

Figure 21.1 



Nonbreaking Space 

The most common character entity in HTML is the nonbreaking space. 

Normally, HTML truncates spaces in your text. If you write 1 0 spaces in your text, 
HTML will remove 9 of them. To add lots of spaces to your text, use the   
character entity. 
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Commonly Used Character Entities 



[ 



NOTE 



Entity names are case sensitive! 



RESULT 


DESCRIPTION 


ENTITY NAME 


ENTITY NUMBER 




nonbreaking space 


  


  


< 


less than 


< 


< 




> 


greater than 


> 


> 




& 


ampersand 


& 


& 






cent 


¢ 


&#162 




£ 


pound 


£ 


&#163 




¥ 


yen 


¥ 


&#165 




€ 


euro 


€ 


€ 


§ 


section 


§ 


&#167 




© 


copyright 


© 


&#169 




® 


registered 
trademark 


® 


&#174 





For a complete reference of all character entities, visit the w3 schools HTML Enti- 
ties Reference: 




http : / / www. w3 schools . com/ tags/ ref_entities . asp 
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HTML HEAD AND 
META ELEMENTS 



In This Chapter 

□ Head Element 

□ Meta Element 

Head Element 

The head element <head> contains general information, also called meta- 
information, about a document. Meta means "information about". You can say that 
meta-data means information about data, or meta-information means information 
about information. The head element includes important information such as the 
document's title, style instructions, and more. 



What's Inside the Head Element? 

According to the HTML standard, only a few tags are legal inside the head section. 
The legal tags include the following: 

<base> 

<title> 

<meta> 

<link> 

<styl e> 

<script> 

^ "v You learned more about the <link> and <style> tags in Chapter 20, 

1 ^ "HTML CSS Styles." 

The elements inside the <head> element are not intended to be displayed by a 
browser. Look at the following illegal construct: 
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Try it yourself » 



<head> 

<p>This is some text</p> 
</head> 

In this example, the browser has two options: 

Display the text because it is inside a <p> element. 

Hide the text because it is inside a <head> element. 

As Figure 22.1 demonstrates, if you put an HTML element like <hl> or <p> inside 
a head element like this, most browsers will display it, even if it is illegal. 

Hits is some text 
Figure 22.1 

Should browsers forgive you for errors like this? We don't think so. Others do. 

title Tag 

The document's title information inside a head element is not displayed in the 
browser window, but is used for indexing and cataloging. The result of the follow- 
ing code is shown in Figure 22.2. 



Try it yourself » 



<html> 
<head> 

<title>The document title is hidden</title> 
</head> 

<body> 

<p>This text is di spl ayed</p> 
</body> 

</html> 

This text is displayed 
Figure 22.2 
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base Tag 

The example illustrated in Figure 22.3 demonstrates how to use the <base> tag to 
let all the links on a page open in a new window. 



Try it yourself » 



<html> 
<head> 

<base target="_bl ank"> 
</head> 

<body> 
<P> 

<a href="http://www.w3school s . com" 
target= ,, _blank">This link</a> 

will load in a new window because the target attribute is 
set to ".blank". 

</p> 
<P> 

<a href="http://www.w3school s . com"> 
This link</a> 

will also load in a new window even without a target attri- 
bute. 

</p> 

</body> 
</html> 



This link will load in a new window because the target attribute is set to 
"_biank\ 

This link \viH also load in a new window even without a target attribute. 
Figure 22.3 
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Head Tags 


TAG 


DESCRIPTION 


<head> 


Defines information about the document 


<title> 


Defines the document title 


<base> 


Defines a base URL for all the links on a page 


<link> 


Defines a resource reference 


<meta> 


Defines meta information 


<!DOCTYPE> 


Defines the document type and tells the browser which 
version of the markup language the page is written in. 
This tag goes before the <html > start tag. 



A full list of legal attributes for each element is listed in the w3schools Complete 
HTML Reference online at: 

^^^^ http://www.w3schools.com/tags 



Meta Element 

As discussed earlier in the last section, the head element contains general informa- 
tion (meta-information) about a document. 

HTML also includes a meta element <meta> that goes inside the head element. 
The purpose of the meta element is to provide meta-information about the docu- 
ment. Most often the meta element is used to provide information that is relevant 
to browsers or search engines, like describing the content of your document. 

The meta attributes in the following example identify the document's author, edi- 
tor, and the software used to create the page. 

<html> 
<head> 

<meta name= ,, author" 
content=" Jan Egil Refsnes"> 

<meta name=" revi sed" 

content="Mi chael woodward , 3/14/2010"> 

<meta name= ,, generator" . n 

(continued) 
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(continued) 

content="Mi crosoft FrontPage 5.0"> 

</head> 

</html> 

You can see a complete list of the meta element attributes in the w3schools.com 
HTML 4.01 Tag Reference: 

^^^^ http://www.w3schools.com/html/html_reference.asp 

Keywords for Search Engines 

Information inside a meta element can also describe the document's keywords, 
which are used by search engines to find your page when a user conducts a search 
on the keyword. 



Try it yourself » 



<html> 
<head> 

<meta name="descri ption" 
content="HTML examples"> 

<meta name= ,, keywords" 

content="HTML, DHTML, CSS, XML, JavaScript, VBScript"> 

</head> 

<body> 
<P> 

The meta attributes of this document describe the document 
and its keywords. 

</p> 
</body> 

</html> 
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The intention of the name and content attributes is to describe the content of a 
page, such as: 

<meta name="descri ption" content="Free web tutorials on 

HTML, CSS, XML, and SML" /> 

<meta name= ,, keywords" content="HTML , DHTML, CSS, XML, 
JavaScript" /> 

Some search engines on the Web will use the <name> and <content> attributes 
of the meta tag to index your pages. However, because too many Webmasters have 
used meta tags for spamming, like repeating keywords to give pages a higher search 
ranking, some search engines have stopped using them entirely 

You can read more about search engines in the w3schools.com Web Building Tuto- 
rial at: 

^^^^ http://www.w3schools.com/site/ 

Unknown Meta Attributes 

Sometimes you will see meta attributes that are unknown to you, such as: 

<meta name="securi ty" content= ,, low" /> 

Then you just have to accept that this is something unique to the site or to the 
author of the site, and that it has probably no relevance to you. 

Redirect a User 

This example demonstrates how to redirect a user if your site address has changed. 



Try it yourself » 



<html> 
<head> 

<meta http-equi v="Ref resh" 

content="5 ; url=http://www.w3school s . com"> 

</head> 

<body> 
<P> 

Sorry! we have moved! The new URL is: <a href="http : //www. 
w3school s . com">http : //www. w3school s . com</a> 

</p> 

(continued) 
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(continued) 



<P> 

You will be redirected to the new address in five seconds. 

</p> 



<P> 

if you see this message for more than 5 seconds, please 
click on the link above! 

</p> 



</body> 
</html> 



The W3 Consortium states that "Some user agents support 
the use of META to refresh the current page after a specified number of sec- 
onds, with the option of replacing it by a different URL. Authors should not 
use this technique to forward users to different pages, as this makes the page 
inaccessible to some users. Instead, automatic page forwarding should be 
done using server-side redirects." For more information, visit the W3 Web site: 



http : / / www. w3 . org/TR/html4/ struct/ global. html#adef-http-equiv 
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HTML UNIFORM 
RESOURCE 
LOCATORS 



In This Chapter 

□ Uniform Resource Locator (URL) 

□ URL Schemes 

□ Using Links 

Uniform Resource Locator (URL) 

Something called a uniform resource locator (URL) is used to address a document 
(or other data) on the World Wide Web. When you click on a link in an HTML 
document, an underlying <a> tag points to a place (an address) on the Web with an 
href attribute value like this: 

<a href="l astpage . htm">Last Page</a> 

The lastpage.htm link in the example is a link that is relative to the Web site that 
you are browsing, and your browser will construct a full Web address to access the 
page, such as: 

http://www.w3school s . com/html /I astpage . htm 

A full Web address follows these syntax rules: 

scheme : //host . domai n : port/path/fil ename 

The scheme is defining the type of Internet service. The most common type is 
http. 

The domain is defining the Internet domain name like w3schools.com. 

The host is defining the domain host. If omitted, the default host for http is 
www. 

The :port is defining the port number at the host. The port number is nor- 
mally omitted. The default port number for http is 80. 
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The path is defining a path (a subdirectory) at the server. If the path is omitted, 
the resource (the document) must be located at the root directory of the Web 
site. 

The filename is defining the name of a document. The default filename might 
be default.asp, index.html, or something else depending on the settings of the 
Web server. 

URL Schemes 



Some examples of the most common schemes can be found in the following table: 



SCHEMES 


ACCESS 


file 


a file on your local PC 


ftp 


a file on an FTP server 


http 


a file on a World Wide Web Server 


gopher 


a file on a Gopher server 


news 


a Usenet newsgroup 


telnet 


a Telnet connection 


WAIS 


a file on a WAIS server 



Accessing a Newsgroup 

The following HTML code: 

<a href="news : al t . html ">html Newsgroup</a> 
creates a link to a newsgroup. 



Downloading with FTP 

The following HTML code: 

<a href="ftp : //www. w3school s . com/ftp/wi nzi p . exe">Downl oad 
wi nzi p</a> 

creates a link to an FTP directory. (The link doesn't work. Don't try it. It's just an 
example. w3 schools doesn't really have an FTP directory.) 

Link to your Mail system 

The following HTML code: 

<a href="mai 1 to : someone@w3school s . com">someone@w3school s . 
com</a> 

creates a link that opens a new e-mail message addressed to the address in the link. 
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Using Links 

The following sample code shows how to use the three types of URL links described. 
Results of the code appear in Figure 23.1. 



Try it yourself » 



<html> 
<body> 

<pxa href= ,, news:alt.html">HTML Newsgroup</ax/p> 

<pxa href="ftp : //www. w3school s . com/ftp/wi nzi p . exe">Downl oad 
wi nzi p</ax/p> 

<pxa href="mai 1 to : someone@w3school s . com">someone@w3school s . 
com</ax/p> 

</body> 

</html> 

HTML Ncwsgrop 

someone w3 schools, com 
Figure 23.1 
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HTML SCRIPTS 



In This Chapter 

□ Insert a Script into a Page 

□ How to Handle Older Browsers 

□ noscriptTag 

□ Script Tags 

Insert a Script into a Page 

Add scripts to HTML pages to make them more dynamic and interactive. A script 
in HTML is defined with the <scri pt> tag. 

This example demonstrates how to insert a script into your HTML document. 
Note that you will have to use the type attribute to specify the scripting language. 
The following script produces the output shown in Figure 24.1. 



Try it yourself » 



<html> 
<body> 

<scri pt type="text/javascri pt"> 
document. write("Hello world!") 
</scri pt> 

</body> 
</html> 



Hefc> World! 
Figure 24.1 



To learn more about scripting in HTML, read w3schools' JavaScript tutorial at: 
^^^^ http://www.w3schools.com/js/ 
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How to Handle Older Browsers 

A browser that does not recognize the <sc ri pt> tag at all will display the <sc ri pt> 
tag's content as text on the page. To prevent the browser from doing this, you 
should hide the script in comment tags. An old browser (that does not recognize the 
<scri pt> tag) will ignore the comment, and it will not write the tag's content on 
the page. On the other hand, a new browser will understand that the script should 
be executed, even if it is surrounded by comment tags. 

JavaScri pt : 

<scri pt type="text/javascri pt"> 
<!- 

document. write("Hello world!") 

//--> 
</scri pt> 

VBScript: 

<script type="text/vbscri pt"> 
<!- 

document .wri te("Hel 1 o World!") 
'--> 

</scri pt> 

The following example demonstrates how to prevent browsers that do not support 
scripting from displaying text unintentionally. The results appear in Figure 24.2. 



Try it yourself » 



<html> 
<body> 

<scri pt type="text/javascri pt"> 
<!-- 

document .write("if this is displayed, your browser supports 
scri pti ng ! ") 

//--> 
</scri pt> 

<noscript>No JavaScript support ! </noscri pt> 

</body> 
</html> 



If this is displayed, your browser supports scripting? 
Figure 24.2 
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noscript Tag 

In addition to hiding the script inside a comment, you can also add a <noscri pt> 
tag. 

The <noscri pt> tag is used to define an alternate text if a script is NOT executed. 
This tag is used for browsers that recognize the <scri pt> tag, but do not support 
the script inside, so these browsers will display the text inside the <noscri pt> tag 
instead. However, if a browser supports the script inside the <scri pt> tag it will 
ignore the <noscri pt> tag. 

JavaScri pt : 

<scri pt type="text/javascri pt"> 
<!-- 

document . wri te("Hel 1 o worl d ! ") 

//--> 
</scri pt> 

<noscri pt>Your browser does not support JavaScri pt ! </ 
noscri pt> 

VBScript: 

<script type="text/vbscri pt"> 
<!- 

document .wri te("Hel 1 o world!") 
'--> 

</scri pt> 

<noscri pt>Your browser does not support VBScri pt !</noscri pt> 

Script Tags 



TAG 


DESCRIPTION 


<script> 


Defines a script 


<noscript> 


Defines an alternate text if the script is not executed 


<object> 


Defines an embedded object 


<param> 


Defines runtime settings (parameters) for an object 


<applet> 


Deprecated. Use <object> instead 
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HTML STANDARD 
ATTRIBUTES 



In This Chapter 

□ Core Attributes 

□ Language Attributes 

□ Keyboard Attributes 

HTML tags can have attributes. The special attributes for each tag are listed under 
each tag description. The attributes listed here are the core and language attributes 
that are standard for all tags (with a few exceptions) . 

Core Attributes 



Not valid in base, head, html, meta, param, script, style, and title ele- 
ments. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


class 


class_rule or style_rule 


The class of the element 


id 


id_name 


A unique id for the element 


style 


style_definition 


An inline style definition 


title 


tooltip_text 


A text to display in a tool tip 



Language Attributes 

Not valid in base, br, frame, frameset, hr, i frame, param, and script ele- 
ments. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


dir 


ltr | rtl 


Sets the text direction 


lang 


language _code 


Sets the language code 
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Kcvbodrd Attributes 



ATTRIBUTE 


VALUE 


DESCRIPTION 


accesskey 


character 


Sets a keyboard shortcut to access an element 


tabindex 


number 


Sets the tab order of an element 
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HTML EVENT 
ATTRIBUTES 



In This Chapter 

□ Window Events 

□ Form Element Events 

□ Keyboard Events 

□ Mouse Events 

New to HTML 4.0 is the ability to let HTML events trigger actions in the browser, 
like starting a JavaScript when a user clicks on an HTML element. The following 
tables list attributes that can be inserted into HTML tags to define event actions. 

Elf you want to learn more about programming with these events, you 
should study w3schools' tutorials on JavaScript and DHTML: 

JavaS crip t : http : / / www. w3 schools . com/j s 
DHTML: http : / / www. w3 schools . com/ dhtml 



Window Events 



These attributes are valid only in body and frameset elements. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onload 


script 


Script to be run when a document loads 


onunload 


script 


Script to be run when a document unloads 
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Form Element Events 



These attributes are valid only in form elements. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onchange 


script 


Script to be run when the element changes 


onsubmit 


script 


Script to be run when the form is submitted 


onreset 


script 


Script to be run when the form is reset 


onselect 


script 


Script to be run when the element is selected 


onblur 


script 


Script to be run when the element loses focus 


onfocus 


script 


Script to be run when the element gets focus 



Keyboard Events 

These attributes are not valid in base , bdo , br , frame , frameset , head , 
html, iframe, meta, param, script, style, and title elements. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onkeydown 


script 


What to do when key is pressed 


onkeypress 


script 


What to do when key is pressed and released 


onkeyup 


script 


What to do when key is released 



Mouse Events 



These attributes are not valid in base , bdo , br , frame , frameset , head , 
html, iframe, meta, param, script, style, and ti tl e elements. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onclick 


script 


What to do on a mouse click 


ondblclick 


script 


What to do on a mouse double-click 


onmousedown 


script 


What to do when mouse button is pressed 


onmousemove 


script 


What to do when mouse pointer moves 


onmouseout 


script 


What to do when mouse pointer moves out 
of an element 


onmouseover 


script 


What to do when mouse pointer moves over 
an element 


onmouseup 


script 


What to do when mouse button is released 
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HTML URL 
ENCODING 



In This Chapter 

□ URL Encoding 

□ Common URL Encoding Characters 



URL Encoding 

URL encoding converts characters into a format that can be safely transmitted over 
the Internet. 

As you learned in Chapter 23, "HTML Uniform Resource Locators," Web brows- 
ers request pages from Web servers by using a URL. The URL is the address of a 
Web page like http://www.w3schools.com. 

URLs can only be sent over the Internet using the ASCII character set. ASCII is a 
7-bit character set containing 128 characters. It contains the numbers from 0-9, the 
uppercase and lowercase English letters from A to Z, and some special characters. 

^ See Appendix G, "HTML ISO-8859-1 Reference," for the complete 

^ ASCII character set. 

Because URLs often contain characters outside the ASCII set, the URL has to be 
converted. URL encoding converts the URL into a valid ASCII format. It replaces 
unsafe ASCII characters with "%" followed by two hexadecimal digits correspond- 
ing to the character values in the ISO-8859-1 character set. ISO-8859-1 is the 
default character set in most browsers. 

The first 128 characters of ISO-8859-1 are the original ASCII character set (the 
numbers from 0-9, the uppercase and lowercase English alphabet, and some special 
characters). The higher part of ISO-8859-1 (codes from 160-255) contains the 
characters used in Western European countries and some commonly used special 
characters. 

See Appendix H, "HTML Symbol Entities Reference" for the complete 

y ISO-8859-1 character set. 
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URLs cannot contain spaces. URL encoding normally replaces a space with a + 

sign- 



Common URL Encoding Characters 









vooU 










® 


%AE 


A 


%C0 


A 


%C1 


A 


%C2 


A 


%C3 


A 


%C4 


A 


%C5 


space 


%20 




See the w3schools' HTML Language Code Reference for the complete 
URL Encoding reference. 
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CHAPTER 28 

TURN YOUR PC INTO 
A WEB SERVER 



In This Chapter 

□ Your Windows PC as a Web Server 

□ Installing IIS on Windows Vista and Windows 7 

□ Installing IIS on Windows XP and Windows 2000 

□ Testing Your Web 

□ Your Next Step: A Professional Web Server 

Your Windows PC as a Web Server 

If you want other people to view your pages, you must publish them. To publish 
your work, you must save your pages on a Web server. 

Your own PC can act as a Web server if you install Internet Information Server (IIS) 
or Personal Web Server (PWS). IIS or PWS turns your computer into a Web server. 
Microsoft IIS and PWS are free Web server components. 



Mac OS X users can also run their own local web server sim- 
ply by checking the "Web Sharing" option in the Systems Sharing prefer- 
ence and then sticking their .html/.css/..Web files in their "Sites" folder. 
See:http://docs.info.apple.com/article.html?path=Mac/10.6/en/8236.html 



Internet Information Server (IIS) 

IIS is a set of Internet-based services for servers created by Microsoft for use with 
Microsoft Windows. IIS comes with Windows 2000, XP, Vista, and 7. It is also 
available for Windows NT. 

IIS is easy to install and ideal for developing and testing Web applications. IIS 
includes Active Server Pages (ASP), a server-side scripting standard that can be used 
to create dynamic and interactive Web applications. 
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If you want to know more about ASP, see the w3schools ASP tutorial: 
http : / / www. w3 schools . com/ asp 




Personal Web Server (PWS) 

PWS is for older Windows systems like Windows 95, 98, and NT. PWS is easy to 
install and can be used for developing and testing Web applications including ASP. 



NOTE 



We don't recommend running PWS for anything other than training. 
It is outdated and has security issues. 



Windows Web Server Versions 

Not all versions of Windows support IIS and/or PWS, but most do. Here's a rela- 
tively complete list. 

Windows 7 Home, Professional, Enterprise, and Ultimate come with IIS 7.5 

Windows Vista Business, Enterprise and Ultimate come with IIS 7 

Windows Vista Home Premium comes with IIS 7 

Windows Vista Home Edition does not support PWS or IIS 

Windows XP Professional comes with IIS 5.1 

Windows XP Home Edition does not support IIS or PWS 

Windows 2000 Professional comes with IIS 5.0 

Windows NT Professional comes with IIS 3 and also supports IIS 4 

Windows NT Workstation supports PWS and IIS 3 

Windows Me does not support PWS or IIS 

Windows 98 comes with PWS 

Windows 95 supports PWS 



Installing IIS on Windows Vista and 
Windows 7 

Follow these steps to install IIS on Windows Vista or 7: 

1 . Open the Control Panel from the Start menu. 

2. Double-click Programs and Features. 
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3. Click "Turn Windows features on or off" (a link to the left). 

4. Select the check box for Internet Information Services (IIS), and click OK. 

After you install IIS, be sure to run Microsoft Update to install all patches for bugs 
and security problems. Test your Web, as explained later in this chapter. 

Installing IIS on Windows XP and Win- 
dows 2000 

Follow these steps to install IIS on Windows XP and Windows 2000: 

1 . On the Start menu, click Settings and select Control Panel. 

2. Double-click Add or Remove Programs. 

3. Click Add/Remove Windows Components. 

4. Click Internet Information Services (IIS). 

5. Click Details. 

6. Select the check box for World Wide Web Service, and click OK. 

7. In Windows Component selection, click Next to install IIS. 

After you install IIS, be sure to run Microsoft Update to install all patches for bugs 
and security problems. Test your Web, as described next. 

Testing Your Web 

After you install IIS or PWS, follow these steps: 

1 . Look for a new folder called Inetpub on your hard drive. 

2. Open the Inetpub folder, and find a folder named wwwroot. 

3. Create a new folder under wwwwroot and name it something like "My Web." 

4. Write some ASP code and save the file as testl.asp in the new folder. 

5. Make sure your Web server is running. 

6. Open your browser and type "http://localhost/MyWeb/testl .asp" to view your 
first Web page. 



NOTE 



Look for the IIS (or PWS) symbol in your Start menu or taskbar.The 
program has functions for starting and stopping the Web server, disabling and 
enabling ASP, and much more. 
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Installing PWS on Windows 95, 98, and Windows 
NT 

Follow these steps to install PWS on Windows 95, 98, and Windows NT: 

Windows 98. Open the Add-ons folder on your Windows CD, find the PWS 
folder and double-click runsetup.exe to install PWS. 

Windows 95 or Windows NT. Download Windows NT 4.0 Option Pack 
from Microsoft, and install PWS. 

Test your Web as described earlier. 

Your Next Step: A Professional Web 
Server 

If you do not want to use PWS or IIS, you must upload your files to a public server. 
Most Internet service providers (ISPs) will offer to host your Web pages. If your 
employer has an Internet server, you can ask him to host your Web site. 

If you are really serious about this, you should install your own Internet server. 
Before you select an ISP, be sure you read w3schools Web Hosting Tutorial at: 

^^^^ http://www.w3schools.com/hosting 
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HTML AND CSS 
SUMMARY 



You Have Learned HTML, Now What? 

This tutorial has taught you how to use HTML to create your own Web site. 

HTML is the universal markup language for the Web. HTML lets you format text, 
add graphics, create links, input forms, frames, and tables, and so on, and save it all 
in a text file that any browser can read and display. 

The key to HTML is the tags, which indicate what content is coming up. 

For more information on HTML, the w3schools.com Web site offers two helpful 
tools you can study: 





HTML Examples: http://www.w3schools.com/html/html_examples.asp 
HTML Reference: http://www.w3schools.com/tags 



What's Next? 

The next step is to learn CSS. 



CSS 

CSS is used to control the style and layout of multiple Web pages all at once. With 
CSS, all formatting can be removed from the HTML document and stored in a 
separate file. CSS gives you total control of the layout, without messing up the 
document content. 

EYou can learn more about styles and CSS in the companion book Learn 
CSS and HTML with w3schools, or by visiting http://www.w3schools. 
com/css. 
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Section III 
Appendixes 



□ Appendix A: HTML 4.01 Reference 

□ Appendix B: HTML Standard Attributes 

□ Appendix C: HTML Standard Event Attributes 

□ Appendix D: HTML Elements and Valid Doctypes 

□ Appendix E: HTML Character Sets 

□ Appendix F: HTML ASCII Reference 

□ Appendix G: HTML ISO-8859-1 Reference 

□ Appendix H: HTML Symbol Entities Reference 

□ Appendix I: HTML URL Encoding Reference 
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APPENDIX A 

HTML 4.01 
REFERENCE 



If you visit this reference on the w3schools Web site, you will find links for each 
item in the Property column that point to syntax, examples, browser support, and 
so on: 




http : / / www. w3 schools . com/ tags 



DTD 



This indicates in which HTML 4.01 DTD the tag is allowed. S=Strict, 
T=Transitional, and F=Frameset. 



^ "V For more information about DTDs, see Chapter 19, "Why Use HTML 

^ ^ 4.0?" 

SFor more information about DTDs, visit the w3schools reference HTML 
<!DOCTYPE> Declaration at http://www.w3schools.com/tags/tag_ 
doctype.asp. 



Ordered Alphabetically 



TAG 


DESCRIPTION 


DTD 


<!--...--> 


Defines a comment 


STF 


<!DOCTYPE> 


Defines the document type 


STF 


<a> 


Defines an anchor 


STF 


<abbr> 


Defines an abbreviation 


STF 


<acronym> 


Defines an acronym 


STF 


< address > 


Defines contact information for the 
author/owner of a document 


STF 



177 



Learn HTML and CSS with w3schools 



TAG 


DESCRIPTION 


DTD 


<applet> 


Deprecated. Defines an embedded 
applet 




<area /> 


Defines an area inside an image-map 


STF 


<D> 


Defines bold text 


jlr 


<base /> 


Defines a default address or a default 
target for all links on a page 


jlr 


<basefont /> 


Deprecated. Defines a default font, 
color, or size for the text in a page 


TF 


<bdo> 


Defines the text direction 


STF 


<big> 


Defines big text 


STF 


<blockquote> 


Defines a long quotation 


STF 


<body> 


Defines the document's body 


STF 


<br /> 


Defines a single line break 


STF 


<button> 


Defines a pushbutton 


STF 


<caption> 


Defines a table caption 


STF 


<center> 


Deprecated. Defines centered text 


TF 


<cite> 


Defines a citation 


STF 


<code> 


Defines computer code text 


jlr 


<col /> 


Defines attribute values for one or more 
columns in a table 


STF 


<colgroup> 


Defines a group of columns in a table 
for formatting 


jlr 


<dd> 


Defines a description of a term in a 
definition list 


STF 


<del> 


Defines deleted text 


STF 


<dfn> 


Defines a definition term 


STF 


<dir> 


Deprecated. Defines a directory list 


TF 


<div> 


Defines a section in a document 


STF 


<dl> 


Defines a definition list 


STF 


<dt> 


Defines a term (an item) in a definition 
list 


jlr 


<em> 


Defines emphasized text 




^ T~t f± \ r\ 


1 lpfinpc o hrvrnpf o rr\i tr\ r\ 1 f± tin pntc i r\ o 

i_yciiiica d uuiU-Ci diumiU- ciciiiciiia 111 d. 

form 


STF 


<font> 


Deprecated. Defines font, color, and size 
for text 


TF 


<form> 


Defines an HTML form for user input 


STF 
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TAG 


DESCRIPTION 


DTD 


< frame / > 


Defines a window (a frame) in a frameset 


F 


<frameset> 


Defines a set of frames 


F 


<hl> to <h6> 


Defines HTML headings 


STF 


<head> 


Defines information about the docu- 
ment 


STF 


<hr /> 


Defines a horizontal line 


STF 


<html> 


Defines an HTML document 


STF 


<i> 


Defines italic text 


STF 


<iframe> 


Defines an inline frame 


TF 


<img /> 


Defines an image 


STF 


<input /> 


Defines an input control 


STF 


<ins> 


Defines inserted text 


STF 


<isindex> 


Deprecated. Defines a searchable index 
related to a document 


TF 


<kbd> 


Defines keyboard text 


STF 


<label> 


Defines a label for an input element 


STF 


<legend> 


Defines a caption for a fieldset element 


STF 


<li> 


Defines a list item 


STF 


<link /> 


Defines the relationship between a 
document and an external resource 


STF 


<map> 


Defines an image-map 


STF 


<menu> 


Deprecated. Defines a menu list 


TF 


<meta /> 


Defines metadata about an HTML 
document 


STF 


<norrames> 


Defines an alternate content for users 
that do not support frames 


i r 


<noscript> 


Defines an alternate content for users 
that do not support client-side scripts 


STF 


<object> 


Defines an embedded object 


STF 


<ol> 


Defines an ordered list 


STF 


<optgroup> 


Defines a group of related options in a 
select list 


STF 


<option> 


Defines an option in a select list 


STF 


<p> 


Defines a paragraph 


STF 


<param / > 


Defines a parameter for an object 


STF 


<pre> 


Defines preformatted text 


STF 
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TAG 


DESCRIPTION 


DTD 


<q> 


Defines a short quotation 


STF 


<s> 


Deprecated. Defines strikethrough text 


TF 


<samp> 


Defines sample computer code 


STF 


<script> 


Defines a client-side script 


STF 


<select> 


Defines a select list (drop-down list) 


STF 


<small> 


Defines small text 


STF 


<span> 


Defines a section in a document 


STF 


<strike> 


Deprecated. Defines strikethrough text 


TF 


<strong> 


Defines strong text 


STF 


< stylo 


Defines style information for a docu- 
ment 


STF 


<sub> 


Defines subscripted text 


STF 


<sup> 


Defines superscripted text 


STF 


<table> 


Defines a table 


STF 


<tbody> 


Groups the body content in a table 


STF 


<td> 


Defines a cell in a table 


STF 


<textarea> 


Defines a multiline text input control 


STF 


<tfoot> 


Groups the footer content in a table 


STF 


<th> 


Defines a header cell in a table 


STF 


<thead> 


Groups the header content in a table 


STF 


<title> 


Defines the title of a document 


STF 


<tr> 


Defines a row in a table 


STF 


<tt> 


Defines teletype text 


STF 


<u> 


Deprecated. Defines underlined text 


TF 


<ul> 


Defines an unordered list 


STF 


<var> 


Defines a variable part of a text 


STF 


<xmp> 


Deprecated. Defines preformatted text 




dered by Function 


TAG 


DESCRIPTION 


DTD 


Basic 


<!DOCTYPE> 


Defines the document type 


STF 


<html> 


Defines an HTML document 


STF 


<body> 


Defines the document's body 


STF 
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TAG 


DESCRIPTION 


DTD 


<hl> to <h6> 


Defines HTML headings 


STF 


<P> 


Defines a paragraph 


STF 


<br /> 


Inserts a single line break 


STF 


<hr /> 


Defines a horizontal line 


STF 


<!--...--> 


Defines a comment 


STF 


Formatting 


<acronym> 


Defines an acronym 


STF 


<abbr> 


Defines an abbreviation 


STF 


< address > 


Defines contact information for the 
author/owner of a document 


STF 


<b> 


Defines bold text 


STF 


<bdo> 


Defines the text direction 


STF 


<bis> 


Defines big text 


STF 


<blockquote> 


Defines a long quotation 

o 1 


STF 


<center> 


Deprecated. Defines centered text 


TF 


<cite> 


Defines a citation 


STF 


<code> 


Defines computer code text 


STF 


<del> 


Defines deleted text 


STF 


<dfn> 


Defines a definition term 


STF 


<em> 


Defines emphasized text 


STF 


<font> 


Deprecated. Defines font, color, and size 
for text 


TF 


<i> 


Defines italic text 


STF 


<ins> 


Defines inserted text 


STF 


<kbd> 


Defines keyboard text 


STF 


<pre> 


Defines preformatted text 


STF 


<q> 


Defines a short quotation 


STF 


<s> 


Deprecated. Defines strikethrough text 


TF 


<samp> 


Defines sample computer code 


STF 


<small> 


Defines small text 


STF 


<strike> 


Deprecated. Defines strikethrough text 


TF 


<strong> 


Defines strong text 


STF 


<sub> 


Defines subscripted text 


STF 


<sup> 


Defines superscripted text 


STF 


<tt> 


Defines teletype text 


STF 
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TAG 


DESCRIPTION 


DTD 


<u> 


Deprecated. Defines underlined text 


TF 


<var> 


Defines a variable part of a text 


STF 


<xmp> 


Deprecated. Defines preformatted text 




Forms 


<form> 


Defines an HTML form for user input 


STF 


<input /> 


Defines an input control 


STF 


<textarea> 


Defines a multiline text input control 


STF 


<button> 


Defines a pushbutton 


STF 


<select> 


Defines a select list (drop-down list) 


STF 


<optgroup> 


Defines a group of related options in a 
select list 


STF 


<option> 


Defines an option in a select list 


STF 


<label> 


Defines a label for an input element 


STF 


<fieldset> 


Defines a border around elements in a 
form 


STF 


<legend> 


Defines a caption for a fieldset element 


STF 


<isindex> 


Deprecated. Defines a searchable index 
related to a document 


TF 


Frames 


< frame / > 


Defines a window (a frame) in a frameset 


F 


<frameset> 


Defines a set of frames 


F 


<noframes> 


Defines an alternate content for users 
that do not support frames 


TF 


<iframe> 


Defines an inline frame 


TF 


Images 






<img /> 


Defines an image 


STF 


<map> 


Defines an image-map 


STF 


<area /> 


Defines an area inside an image-map 


STF 


Links 






<a> 


Defines an anchor 


STF 


<link /> 


Defines the relationship between a 
document and an external resource 


STF 


Lists 


<ul> 


Defines an unordered list 


STF 


<ol> 


Defines an ordered list 


STF 
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TAG 


DESCRIPTION 


DTD 


<li> 


Defines a list item 


STF 


<dir> 


Deprecated. Defines a directory list 


TF 


<Qi> 


Defines a definition list 


jir 


<dt> 


Defines a term (an item) in a definition 
list 


jir 


<dd> 


Defines a description of a term in a 
definition list 


STF 


<menu> 


Deprecated. Defines a menu list 


TF 


Tables 


<table> 


Defines a table 


STF 


<caption> 


Defines a table caption 


STF 


<th> 


Defines a header cell in a table 


STF 


<tr> 


Defines a row in a table 


STF 


<td> 


Defines a cell in a table 


STF 


<thead> 


Groups the header content in a table 


STF 


<tbody> 


Groups the body content in a table 


STF 


<tfoot> 


Groups the footer content in a table 


STF 


<col /> 


Defines attribute values for one or more 
columns in a table 


STF 


<colgroup> 


Defines a group of columns in a table 
for formatting 


STF 


Styles 


< stylo 


Defines style information for a docu- 
ment 


STF 


<div> 


Defines a section in a document 


STF 


<span> 


Defines a section in a document 


STF 


Meta Info 






<head> 


Defines information about the docu- 
ment 


STF 


<title> 


Defines the document title 


STF 


<meta> 


Defines metadata about an HTML 
document 


STF 


<base /> 


Defines a default address or a default 
target for all links on a page 


STF 


<basefont /> 


Deprecated. Defines a default font, 
color, or size for the text in a page 


TF 
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TAG 


DESCRIPTION 


DTD 


Programming 


<script> 


Defines a client-side script 


Mr 


<noscript> 


Defines an alternate content for users 
that do not support client-side scripts 


STF 


<applet> 


Deprecated. Defines an embedded 
applet 


TF 


<object> 


Defines an embedded object 


STF 


<param /> 


Defines a parameter for an object 


STF 
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HTML 
STANDARD 
ATTRIBUTES 



The attributes listed in this appendix are standard. They are supported by all HTML 
and tags with a few exceptions. 

If you visit this reference on the w3schools Web site, you will find links for each 
item in the Attribute column that point to syntax, examples, tips, browser support, 
and so on: 

^^^^ http : / / www. w3 schools . com/ tags/ ref_s tandardattrib utes . asp 



Core Attributes 

Not valid in base, head, html, meta, param, script, style, and title ele- 
ments 



ATTRIBUTE 


VALUE 


DESCRIPTION 


class 


classname 


Specifies a classname for an element 


id 


id 


Specifies a unique id for an element 


style 


style_definition 


Specifies an inline style for an element 


title 


text 


Specifies extra information about an 
element 
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Language Attributes 



Not valid in base, br, frame, frameset, hr, if rame, param, and script ele- 
ments 



ATTRIBUTE 


VALUE 


DESCRIPTION 


dir 


ltr 
rtl 


Specifies the text direction for the 
content in an element 


lang 


language_code 


Specifies a language code for the 
content in an element. Language code 
reference 




For a complete language code reference, visit the w3schools Web site: 
http : / / www. w3 schools . com/ tags/ ref_language_codes . asp 



Keyboard Attributes 



ATTRIBUTE 


VALUE 


DESCRIPTION 


accesskey 


character 


Specifies a keyboard shortcut to access an 
element 


tabindex 


number 


Specifies the tab order of an element 
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HTML STANDARD 
EVENT ATTRIBUTES 



HTML 4 added the ability to let events trigger actions in a browser, like starting a 
JavaScript when a user clicks on an element. 

ETo learn more about programming events, please read Learn JavaScript 
and Aj ax with w3schools, also from Wiley Publishing, or visit the JavaS- 
cript tutorial at www.w3schools.com/js. 

^^^^ Also be sure to visit the DHTML tutorial at www.w3schools.com/dhtml 

The following tables list the standard event attributes that can be inserted into 
HTML elements to define event actions. 

body and frameset Events 

These attributes can only be used in <body> or <f rameset>: 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onload 


script 


Script to be run when a document loads 


onunload 


script 


Script to be run when a document unloads 



Form Events 

These attributes can be used in form elements. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onblur 


script 


Script to be run when an element loses focus 


onchange 


script 


Script to be run when an element changes 


onfocus 


script 


Script to be run when an element gets focus 


onreset 


script 


Script to be run when a form is reset 


onselect 


script 


Script to be run when an element is selected 


onsubmit 


script 


Script to be run when a form is submitted 
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Image Events 

This attribute can be used with the i mg element. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onabort 


script 


Script to be run when loading of an image is 
interrupted 



Keyboard Events 

Valid in all elements except base, bdo, br, frame, frameset, head, html, 
if rame, meta, param, script, style, and title. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onkeydown 


script 


Script to be run when a key is pressed 


onkeypress 


script 


Script to be run when a key is pressed and 
released 


onkeyup 


script 


Script to be run when a key is released 



Mouse Events 



Valid in all elements except base, bdo, br, frame, frameset, head, html, 
if rame, meta, param, script, style, and title. 



ATTRIBUTE 


VALUE 


DESCRIPTION 


onclick 


script 


Script to be run on a mouse click 


ondblclick 


script 


Script to be run on a mouse double-click 


onmousedown 


script 


Script to be run when mouse button is clicked 


onmousemove 


script 


Script to be run when mouse pointer moves 


onmouseout 


script 


Script to be run when mouse pointer moves 
out of an element 


onmouseover 


script 


Script to be run when mouse pointer moves 
over an element 


onmouseup 


script 


Script to be run when mouse button is released 
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HTML 
ELEMENTS AND 
VALID DOCTYPES 

If you visit this reference on the w3 schools Web site, you will find links for each 
item in the Tag column that point to syntax, examples, tips, browser support, and 
so on: 

ff? 

^^JE www.w3schools.com/ tags/ tag_doctype.asp 

For more information about DTDs, see Chapter 19, "Why Use HTML 4.0?" 

For more information about DTDs, visit the w3schools reference "HTML <!DOC- 
TYPE> Declaration" at: 

^^^^ www.w3schools.com/tags/tag_doctype.asp. 



The following table lists all HTML elements and defines which doctype declara- 
tions (DTDs) each element appears in. 



TAG 


HTML 4.01 


TRANSITIONAL 


STRICT 


FRAMESET 


<a> 


Yes 


Yes 


Yes 


<abbr> 


Yes 


Yes 


Yes 


< acronym > 


Yes 


Yes 


Yes 


<address> 


Yes 


Yes 


Yes 


<applet> 


Yes 


No 


Yes 


<area / > 


Yes 


Yes 


Yes 


<b> 


Yes 


Yes 


Yes 


<base /> 


Yes 


Yes 


Yes 


<basefont /> 


Yes 


No 


Yes 


<bdo> 


Yes 


Yes 


Yes 
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TAG 


HTML 4.01 


TRANSITIONAL 


STRICT 


FRAMESET 


<blockquote> 


Yes 


Yes 


Yes 


<body> 


Yes 


Yes 


Yes 


<br /> 


Yes 


Yes 


Yes 


<button> 


Yes 


Yes 


Yes 


<caption> 


Yes 


Yes 


Yes 


<center> 


Yes 


No 


Yes 


<cite> 


Yes 


Yes 


Yes 


<code> 


Yes 


Yes 


Yes 


<col /> 


Yes 


Yes 


Yes 


<colgroup> 


Yes 


Yes 


Yes 


<dd> 


Yes 


Yes 


Yes 


<del> 


Yes 


Yes 


Yes 


<dfn> 


Yes 


Yes 


Yes 


<dir> 


Yes 


No 


Yes 


<div> 


Yes 


Yes 


Yes 


<dl> 


Yes 


Yes 


Yes 


<dt> 


Yes 


Yes 


Yes 


<em> 


Yes 


Yes 


Yes 


<fieldset> 


Yes 


Yes 


Yes 


<font> 


Yes 


No 


Yes 


<form> 


Yes 


Yes 


Yes 


< frame / > 


No 


No 


Yes 


<frameset> 


No 


No 


Yes 


<hl> to <h6> 


Yes 


Yes 


Yes 


<head> 


Yes 


Yes 


Yes 


<hr /> 


Yes 


Yes 


Yes 


<html> 


Yes 


Yes 


Yes 


<i> 


Yes 


Yes 


Yes 


<iframe> 


Yes 


No 


Yes 


<img / > 


Yes 


Yes 


Yes 


<input /> 


Yes 


Yes 


Yes 


<ins> 


Yes 


Yes 


Yes 
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TAG 


HTML 4.01 


TRANSITIONAL 


STRICT 


FRAMESET 


<kbd> 


Yes 


Yes 


Yes 


<label> 


Yes 


Yes 


Yes 


<legend> 


Yes 


Yes 


Yes 


<li> 


Yes 


Yes 


Yes 


<link /> 


Yes 


Yes 


Yes 


<map> 


Yes 


Yes 


Yes 


<menu> 


Yes 


No 


Yes 


<meta /> 


Yes 


Yes 


Yes 


<noframes> 


Yes 


No 


Yes 


<noscript> 


Yes 


Yes 


Yes 


<object> 


Yes 


Yes 


Yes 


<ol> 


Yes 


Yes 


Yes 


<optgroup> 


Yes 


Yes 


Yes 


<option> 


Yes 


Yes 


Yes 


<p> 


Yes 


Yes 


Yes 


<param / > 


Yes 


Yes 


Yes 


<pre> 


Yes 


Yes 


Yes 


<q> 


Yes 


Yes 


Yes 


<s> 


Yes 


No 


Yes 


<samp> 


Yes 


Yes 


Yes 


<script> 


Yes 


Yes 


Yes 


<select> 


Yes 


Yes 


Yes 


<small> 


Yes 


Yes 


Yes 


<span> 


Yes 


Yes 


Yes 


<strike> 


Yes 


No 


Yes 


<strong> 


Yes 


Yes 


Yes 


<style> 


Yes 


Yes 


Yes 


<sub> 


Yes 


Yes 


Yes 


<sup> 


Yes 


Yes 


Yes 


<table> 


Yes 


Yes 


Yes 


<tbody> 


Yes 


Yes 


Yes 


<td> 


Yes 


Yes 


Yes 
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TAG 


HTML 4.01 


TRANSITIONAL 


STRICT 


FRAMESET 


<tfoot> 


Yes 


Yes 


Yes 


<th> 


Yes 


Yes 


Yes 


<thead> 


Yes 


Yes 


Yes 


<title> 


Yes 


Yes 


Yes 


<tr> 


Yes 


Yes 


Yes 


<tt> 


Yes 


Yes 


Yes 


<u> 


Yes 


No 


Yes 


<ul> 


Yes 


Yes 


Yes 


<var> 


Yes 


Yes 


Yes 
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HTML 

CHARACTER SETS 



p> 1\ For more information about working with character sets, see Chapter 27, 

^ \/ "URL Encoding." 



ASCII Characters 

To display an HTML page correctly, the browser must know what character set to 
use. The character set for the early World Wide Web was ASCII. ASCII supports 
the numbers from 0-9, the uppercase and lowercase English alphabet, and some 
special characters. 

^ > For more about ASCII, see Appendix F, "HTML ASCII Reference." 

A complete list of the ASCII character set is available at www. w3 schools, 
com/ tags/ ref_ascii.asp. 




ISO-8859-1 Characters 

Because many countries use characters that are not a part of ASCII, the default 
character set for modern browsers is ISO-8859-1. 

For more about ISO characters, see Appendix G, "HTML ISO-8859-1 
Reference." 

SA complete list of the ISO-8859-1 character set is available at www. 
w3schools . com/ tags/ ref_entities . asp . 
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Other ISO Character Sets 

It is the International Organization for Standardization (ISO) that defines the stan- 
dard character sets for different alphabets/languages. 



LUm If a Web page uses a different character set than ISO-8859-1 , it should be speci- 
fied in the <meta> tag. 



The different character sets being used around the world are listed in the following 
table: 



CHARACTER SET 


DESCRIPTION 


COVERS 


ISO-8859-1 


Latin alphabet part 1 


North America, Western 
Europe, Latin America, the 
Caribbean, Canada, Africa 


ISO-8859-2 


Latin alphabet part 2 


Eastern Europe 


ISO-8859-3 


Latin alphabet part 3 


SE Europe, Esperanto, mis- 
cellaneous others 


ISO-8859-4 


Latin alphabet part 4 


Scandinavia/Baltics (and oth- 
ers not in ISO-8859-1) 


ISO-8859-5 


Latin/ Cyrillic part 5 


The languages that are using 
a Cyrillic alphabet such as 
Bulgarian, Belarusian, Rus- 
sian and Macedonian 


ISO-8859-6 


Latin/Arabic part 6 


The languages that are using 
the Arabic alphabet 




Latin/Greek part V 


The modern Greek language 
as well as mathematical sym- 
bols derived from the Greek 


ISO-8859-8 


Latin/Hebrew part 8 


The languages that are using 
the Hebrew alphabet 


ISO-8859-9 


Latin 5 part 9 


The Turkish language. Same 
as ISO-8859-1 except Turkish 
characters replace Icelandic 
ones 


ISO-8859-10 


Latin 6 Lappish, Nor- 
dic, Eskimo 


The Nordic languages 


ISO-8859-15 


Latin 9 (aka Latin 0) 


Similar to ISO-8859-1 but 
replaces some less common 
symbols with the euro sign 
and some other missing 
characters 
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CHARACTER SET 


DESCRIPTION 


COVERS 


ISO-2022-JP 


Latin/Japanese part 1 


The Japanese language 


ISO-2022-JP-2 


Latin/Japanese part 2 


The Japanese language 


ISO-2022-KR 


Latin/Korean part 1 


The Korean language 



Unicode Standard 



Because the character sets listed in the preceding table are limited in size and are not 
compatible in multilingual environments, the Unicode Consortium developed the 
Unicode Standard. The Consortium's goal is to replace the existing character sets 
with its standard Unicode Transformation Format (UTF). 

The Unicode Standard covers all the characters, punctuations, and symbols in the 
world. Unicode enables processing, storage, and interchange of text data no matter 
what the platform, no matter what the program, no matter what the language. 



TIP 



The first 256 characters of Unicode character sets correspond to the 256 char- 
acters of ISO-8859-1. 



The Unicode Standard has become a success and is implemented in XML, Java, 
ECMAScript (JavaScript), LDAP, CORBA 3.0, WML, and so on. The Unicode 
Standard is also supported in many operating systems and all modern browsers. The 
Unicode Consortium cooperates with the leading standards development organiza- 
tions, like ISO, W3C, and ECMA. 

Unicode can be implemented by different character sets. The most commonly used 
encodings are UTF-8 and UTF- 16 include the following: 



CHARACTER SET 


DESCRIPTION 


UTF-8 


A character in UTF-8 can be from 1 to 4 bytes long. 
UTF-8 can represent any character in the Unicode 
standard. UTF-8 is backwards compatible with ASCII. 
UTF-8 is the preferred encoding for e-mail and Web 
pages. 


UTF- 16 


16-bit Unicode Transformation Format is a variable- 
length character encoding for Unicode, capable of 
encoding the entire Unicode repertoire. UTF- 16 is 
used in major operating systems and environments, like 
Microsoft Windows 2000/XP/2003/Vista/CE and the 
Java and .NET byte code environments. 



NOTE 



All HTML 4 processors already support UTF-8, and all XML processors 
support UTF-8 and UTF-1 6. 
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HTML ASCII 
REFERENCE 



For more information about working with character sets, see Chapter 27, 
"URL Encoding." 

ASCII Character Set 

The ASCII character set is used to send information between computers on the 
Internet. ASCII stands for the American Standard Code for Information Inter- 
change. It was designed in the early 1 960s as a standard character set for computers 
and hardware devices like teleprinters and tapedrives. 

ASCII is a 7-bit character set containing 128 characters. It contains the numbers 
from 0-9, the uppercase and lowercase English letters from A to Z, and some special 
characters. The character sets used in modern computers, HTML, and the Internet 
are all based on ASCII. 

The following table lists the 128 ASCII characters and their equivalent HTML 
entity codes. 




A complete list of the ASCII character set is also available at 
www. w3 schools . com/ tags/ ref_ascii. asp . 



ASCII Printable Characters 



ASCII CHARACTER 


HTML ENTITY CODE 


DESCRIPTION 




  


space 


I 


! 


exclamation mark 




" 


quotation mark 


# 


# 


number sign 


$ 


$ 


dollar sign 


% 


% 


percent sign 


& 


& 


ampersand 
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ASCII CHARACTER 


HTML ENTITY CODE 


DESCRIPTION 


• 


&#39; 


apostrophe 


( 


( 


left parenthesis 


) 


) 


right parenthesis 


* 


* 


asterisk 


+ 


+ 


plus sign 




, 


comma 


_ 


- 


hyphen 




. 


period 


/ 


/ 


slash 


0 


0 


digit 0 


1 


1 


digit 1 


2 


2 


digit 2 


3 


3 


digit 3 


4 


4 


digit 4 


5 


5 


digit 5 


6 


6 


digit 6 


7 


7 


digit 7 


8 


8 


digit 8 


9 


9 


digit 9 




: 


colon 




; 


semicolon 


< 


< 


less-than 


= 


= 


equals-to 


> 


> 


greater-than 


? 


? 


question mark 


@ 


@ 


at sign 


A 


A 


uppercase A 


B 


B 


uppercase B 


C 


C 


uppercase C 


D 


D 


uppercase D 


E 


E 


uppercase E 


F 


F 


uppercase F 


G 


G 


uppercase G 


H 


H 


uppercase H 
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H 1 ML hJN 1 1 1 Y LUDe 


Dr^CKir 1 lOJN 


T 

1 


I 


uppercase 1 


T 

J 


oCW/4; 


uppercase J 


K 


K 


uppercase K 


T 

L 


c£#76; 


uppercase L 


M 




uppercase M 


XT 


oCW/o; 


uppercase N 


U 


O 


uppercase U 


r 


P 


"D 

uppercase r 


Q 




uppercase Cj. 


D 

K 




uppercase R 






uppercase b 


1 


T 


uppercase 1 


T T 

u 


U 


T T 

uppercase U 


V 




uppercase V 


w 


W 


uppercase W 


A 


Q r JJ-0 O 


uppercase X 


Y 


Y 


uppercase Y 


Z 


c£#90; 


uppercase Z 


r 

L 


o r 44-C\ 1 

c£#91; 


left square bracket 


\ 


c£#9z; 


backslash 


J 


o£#9:j; 


right square bracket 




^ 


caret 


— 


c£#9:>; 


underscore 




oC#yb; 


grave accent 


a 


a 


lowercase a 


b 


o£#9o; 


lowercase b 


c 


c 


lowercase c 


d 




lowercase d 


e 


O ^Ji 1 A1 

oC#lUl; 


lowercase e 


r 

r 


Q ^Ji 1 

o£#l(Jz; 


i r 

lowercase r 


g 


g 


i 

lowercase g 


n 


o£# 1U4; 


lowercase h 


i 


i 


lowercase i 


j 


j 


lowercase j 


k 


k 


lowercase k 



198 



Appendix F: HTML ASCII Reference 



ASCII CHARACTER 


HTML ENTITY CODE 


DESCRIPTION 


1 


l 


lowercase 1 


m 


m 


lowercase m 


n 


n 


lowercase n 


o 


o 


lowercase o 


P 


p 


lowercase p 


q 


q 


lowercase q 


r 


r 


lowercase r 


s 


s 


lowercase s 


t 


t 


lowercase t 


u 


u 


lowercase u 


V 


v 


lowercase v 


w 


w 


lowercase w 


X 


x 


lowercase x 


y 


y 


lowercase y 


z 


z 


lowercase z 


{ 


{ 


left curly brace 




| 


vertical bar 


} 


} 


right curly brace 




~ 


tilde 



ASCII Device Control Characters 



The ASCII device control characters were originally designed to control hardware 
devices. Control characters have nothing to do inside an HTML document. 



ASCII CHARACTER 


HTML ENTITY CODE 


DESCRIPTION 


NUL 


&#00; 


null character 


SOH 


&#01; 


start of header 


STX 


&#02; 


start of text 


ETX 


&#03; 


end of text 


EOT 


&#04; 


end of transmission 


ENQ 


&#05; 


enquiry 


ACK 


&#06; 


acknowledge 


BEL 


&#07; 


bell (ring) 


BS 


&#08; 


backspace 
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AbCll CHAKAC 1 LK 


H 1 ML LJN 1 1 1 Y LUUh 


T^H; C/T) TTYTT/^XT 

DhbCKlr 1 lOJN 




oC#0y; 


horizontal tab 


T T7 

Lb 


o _ ji -i rv 


line feed 


V 1 


&#1 1; 


vertical tab 


bb 


O ,-Ji 1 o 

c£#12; 


form reed 


/t> 
CK 


o£#13; 


carriage return 




Q _ Ji -1 / 


shift out 


CT 


&#15; 


shirt in 


DLL 


&#16; 


data link escape 


T^/^ 1 1 


o _ ji -i 


device control 1 




O ,-Ji 1 O 


device control 2 




o _ ji -i n 


device control 3 


DC4 


&#20; 


device control 4 


XT A ~W 

NAK 


&#21; 


i i j 

negative acknowledge 


oYJN 




synchronize 


hi D 




end transmission block 


A XT 

CAJN 


Q JiO / 


cancel 


T7 A /T 


&#25; 


end or medium 


CT TD 


c£#26; 


substitute 


r? c/^ 

LbC 


&#27; 


escape 


bb 


O 7- JiO O 

c£#28; 


hie separator 




oCftZy; 


group separator 


RS 


&#30; 


record separator 


US 


&#31; 


unit separator 


DEL 


&#127; 


delete (rubout) 
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HTML ISO-8859-1 
REFERENCE 



Modern browsers support several character sets: 

ASCII character set (see Appendix F, "HTML ASCII Reference") 

Standard ISO character sets (see Appendix E, "HTML Character 
Sets") 

Unicode Transformation Format (UTF) (see Appendix E, "HTML 
Character Sets") 

Mathematical symbols, Greek letters, and other symbols (see Appen- 
dix H, "HTML Symbol Entities Reference") 

ISO-8859-1 

ISO-8859-1 is the default character set in most browsers. 

The first 128 characters of ISO-8859-1 make up the original ASCII character set 
(the numbers from 0-9, the uppercase and lowercase English alphabet, and some 
special characters). 

The higher part of ISO-8859-1 (codes from 160-255) contains the characters used 
in Western European countries and some commonly used special characters. 

Reserved Characters in HTML 

Some characters are reserved in HTML. For example, you cannot use the greater- 
than or less-than signs within your text because the browser could mistake them 
for markup. 

Entities are used to implement reserved characters or to express characters that can- 
not easily be entered with the keyboard. 

HTML processors must support the five special characters listed in the following 
table. 
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Entity names are case sensitive. 



CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 




" 


" 


quotation mark 




&#39; 


&apos; (does not 
work in IE) 


apostrophe 




&#38 




& 


ampersand 


< 


&#60 




< 


less-than 


> 


&#62 




> 


greater-than 



ISO 8859-1 Symbols 



CHARACTER 


ENTITY 
NUMBER 


TP' TV T'TPT'TPA T TV T A TV jTF 

ENTITY NAME 


DESCRIPTION 




  


taibsp; 


nonbreaking space 


i 


¡ 


O ^' 1 

taexcl; 


T 1 

inverted exclama- 
tion mark 




&#162 




¢ 


cent 


£ 


&#163 




£ 


pound 


□ 


&#164 




¤ 


currency 


¥ 


&#165 




¥ 


yen 


i 
i 


&#166 




¦ 


broken vertical bar 


§ 


&#167 




§ 


section 




&#168 




¨ 


spacing diaeresis 


© 


&#169 




© 


copyright 


a 


&#170 




ª 


feminine ordinal 
indicator 


« 


« 


« 


angle quotation 
mark (left) 




&#172 




¬ 


negation 




&#173 




­ 


soft hyphen 


® 


&#174 




® 


registered trade- 
mark 




&#175 




¯ 


spacing macron 


o 


&#176 




° 


degree 


± 


&#177 




± 


plus-or-minus 
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CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


2 


&#178 




² 


superscript 2 


3 


&#179 




³ 


superscript 3 


' 


&#180 




´ 


spacing acute 




&#181 




tanicro; 


micro 


f 


&#182 




¶ 


paragraph 




&#183 




· 


middle dot 




&#184 




¸ 


spacing cedilla 


1 


&#185 




X/"ci 1 f \ 1 • 

OCb UU 1 , 


aUUCl aL-IIUL 1 


o 


&#186 




?\/~ r\rr\ tm • 
OLUIU-IIlj 


HldaCUllllC OIU.lIl.cLl 

indicator 


» 


» 


taaquo; 


angle quotation 
mark (right) 




&#188 




&fracl4; 


fraction 1/4 


Vl 


&#189 




&fracl2; 


fraction 1/2 


3 /4 


&#190 




¾ 


fraction 3/4 


<! 


&#191 




¿ 


inverted question 
mark 


X 


× 


toimes; 


multiplication 




÷ 


÷ 


division 



ISO 8859-1 Characters 



CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


A 


À 


À 


capital a, grave 
accent 


A 


Á 


Á 


capital a, acute 
accent 


A 


Â 


Â 


capital a, circum- 
flex accent 


A 


Ã 


Ã 


capital a, tilde 


A 


Ä 


Ä 


capital a, umlaut 
mark 


A 


&#197 




Å 


capital a, ring 


JE 


&#198 




Æ 


capital ae 




&#199 




Ç 


capital c, cedilla 
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CHARACTER 


ENTITY 

NTT TMRFR 


ENTITY NAME 


DESCRIPTION 


E 


È 


È 


capital e, grave 

dCCClll 


E 


É 


É 


capital e, acute 
decern 


E 


Ê 


Ê 


capital e, circum- 

llCA dL.CClll 


E 


Ë 


Ë 


capital e, umlaut 
mark 


I 


Ì 


Ì 


capital i, grave 
decern 


I 


Í 


Í 


capital i, acute 

dCCClll 


I 


Î 


Î 


capital i, circumflex 

dCCClll 


f 




OClLlllllj 


/""I t~\ i t"i 1 i litnloiil" 
CdUlldl I, Ulllldlll 

mark 




oc#zuo, 


OCJ_, 1 11, 


cduiLdi cm, Ice- 
landic 


NT 

IN 




OC1N L11U.C, 


CdUlldl 11 j L11U-C 


o 


Ò 


Ò 


capital o, grave 

dCCClll 


o 


OCfr All, 


OC VJ dC U. 1 C j 


/""I t~> i I /"» orn 
CdUlldl (J, dCUlC 

accent 


n 

w 


OCrrZ, 1 Z,, 


OCWC1IC, 


CdUlldl U, CllClUll- 

flex accent 


O 


Õ 


Õ 


capital o, tilde 


n 


QLfrZ, 1 t:. 


OCwUIlllj 


CdUlldl U, lUIlldlLl 

mark 






ocwbidMi, 


CdUlldl U, aldill 


U 


Ù 


Ù 


capital u, grave 

dCCClll 


U 


Ú 


Ú 


capital u, acute 


U 


Û 


Û 


capital u, circum- 
flex accent 


U 


Ü 


Ü 


capital u, umlaut 
mark 
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CHARACTER 


ENTITY 
NTT TMRFR 


ENTITY NAME 


DESCRIPTION 


Y 


Ý 


Ý 


capital y, acute 

dL-L-Clll 


P 


Þ 


Þ 


capital THORN, 

lCCldIlU.lL- 


& 


ß 


ß 


small sharp s, Ger- 
man 


a 


à 


à 


small a, grave 

dCCClll 


a 


KjL.it A, J j 


s\7~n n i^t 1 1 - /^ • 
OCddL-ULCj 


Mlldll dj dCU.LC 

accent 


a 




OCdCLIL., 


Mlldll dj C1ICU.II111CX 

accent 


a 


ã 


ã 


small a, tilde 


a 


ä 


ä 


small a, umlaut 
mark 


a 


&#229 




å 


small a, ring 


as 


&#230 




æ 


small ae 




&#231 




OCUL.CU.il, 


c tm nil r* <^pn t n 
Mlldll C, CCUllld 


e 


&#232 




è 


small e, grave 

dCCClll 


e 


é 


é 


small e, acute 

dCCClll 


e 


ê 


ê 


small e, circumflex 

dCCClll 


e 


ë 


ë 


small e, umlaut 
mark 


i 


ì 


Sdgrave; 


small i, grave 

dCCClll 


{ 


í 


Sdacute; 


small i, acute 

dCCClll 


1 


î 


OC1L-1IL-, 


Mlldll I, C1ICU.II111CX 

accent 


i 


ï 


ï 


small i, umlaut 
mark 


3 


&#240 




ð 


small eth, Icelandic 


n 


&#24l 




ñ 


small n, tilde 


6 


&#242 




ò 


small o, grave 
accent 
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CHARACTER 


ENTITY 

NTT TMRFR 


ENTITY NAME 


DESCRIPTION 


o 


kjL.1t Z^^^J , 




cm nil r\ o 1 
Mlldll (Jj dCUtC 

accent 


o 




OCOC11C, 


Mlldll O, dlCUillllCA 

accent 


6 


õ 


õ 


small o, tilde 


o 


OC#Z.t:U, 


OCUUIIllj 


c tin oil /~\ li tin 1 o 1 1 t~ 
Mlldll U, UlllldUl 

mark 


0 




/\/"/-\c och" 
OCUMdallj 


ctnoll i~\ c ocn 
Mlldll (J, MdMl 


u 


ù 


ù 


small u, grave 

dL-L-CllL 


u 


ú 


ú 


small u, acute 

dCL-CllL 


u 


û 


û 


small u, circumflex 

dCL-CllL 


u 


ü 


ü 


small u, umlaut 
mark 


y 


ý 


ý 


small y, acute 


t> 


þ 


þ 


small thorn, Ice- 
landic 


y 


ÿ 


ÿ 


small y, umlaut 
mark 
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HTML SYMBOL 
ENTITIES REFERENCE 



This entity reference includes mathematical symbols, Greek characters, various 
arrows, technical symbols, and shapes. 



Entity names are case sensitive. 



Math Symbols Supported by HTML 



CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


V 


∀ 


∀ 


for all 


d 


∂ 


∂ 


part 


3 


∃ 


coexists; 


exists 


0 


∅ 


∅ 


empty 


V 


∇ 


∇ 


nabla 




∈ 


∈ 


isin 




∉ 


∉ 


notin 




∋ 


∋ 


ni 


n 


∏ 


∏ 


prod 


i 


∑ 


∑ 


sum 




− 


taninus; 


minus 


* 


∗ 


∗ 


lowast 


V 


√ 


taadic; 


square root 


oc 


∝ 


∝ 


proportional to 


00 


∞ 


&innn; 


infinity 


z 


∠ 


∠ 


angle 
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CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


A 


&#8743 




∧ 


and 


V 


&#8744 




∨ 


or 


n 


&#8745 




∩ 


cap 


u 


&#8746 




∪ 


cup 


/ 


&#8747 




∫ 


integral 




&#8756 




∴ 


therefore 




&#8764 




∼ 


similar to 


= 


&#8773 




≅ 


congruent to 




&#8776 




≈ 


almost equal 




&#8800 




≠ 


not equal 


— 


&#8801 




≡ 


equivalent 


< 


&#8804 




≤ 


less or equal 


> 


&#8805 




≥ 


greater or equal 


C 


&#8834 




⊂ 


subset of 


D 


&#8835 




⊃ 


superset of 


d 


&#8836 




taisub; 


not subset of 




&#8838 




⊆ 


subset or equal 




&#8839 




⊇ 


superset or equal 




&#8853 




⊕ 


circled plus 




&#8855 




⊗ 


circled times 




&#8869 




⊥ 


perpendicular 




&#8901 




⋅ 


dot operator 



Greek Letters Supported by HTML 



CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


A 


&#913 




Α 


Alpha 


B 


&#914 




Β 


Beta 


r 


&#915 




Γ 


Gamma 


A 


&#916 




Δ 


Delta 


E 


&#917 




Ε 


Epsilon 


Z 


&#918 




Ζ 


Zeta 
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CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


H 


&#919 




Η 


Eta 


0 


&#920 




Θ 


Theta 


1 


&#921 




Mota; 


Iota 


K 


&#922 




Κ 


Kappa 


A 


&#923 




Λ 


Lambda 


M 


&#924 




Μ 


Mu 


N 


&#925 




Ν 


Nu 


— 


&#926 




Ξ 


Xi 


0 


&#927 




Ο 


Omicron 


n 


&#928 




Π 


Pi 


p 


&#929 




Ρ 


Rho 




undefined 




Sigmaf 


z 


&#931 




Σ 


Sigma 


T 


&#932 




Τ 


Tau 


Y 


&#933 




Υ 


Upsilon 


O 


&#934 




Φ 


Phi 


X 


&#935 




Χ 


Chi 




&#936 




Ψ 


Psi 


Q 


&#937 




Ω 


Omega 










a 


&#945 




α 


alpha 


P 


&#946 




β 


beta 


Y 


&#947 




γ 


gamma 


5 


&#948 




δ 


delta 


z 


&#949 




ε 


epsilon 


? 


&#950 




ζ 


zeta 


n 


&#951 




η 


eta 


e 


&#952 




toheta; 


theta 


i 


&#953 




ι 


iota 


K 


&#954 




κ 


kappa 


A 


&#955 




&dambda; 


lambda 


M 


&#956 




μ 


mu 


V 


&#957 




ν 


nu 
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CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 




&#958 




ξ 


xi 


0 


&#959 




ο 


omicron 


TT 


&#960 




π 


pi 


P 


&#961 




ρ 


rho 


s 


&#962 




ς 


sigmaf 


a 


&#963 




toigma; 


sigma 


T 


&#964 




toau; 


tau 


U 


&#965 




υ 


upsilon 


<P 


&#966 




φ 


pw 


X 


&#967 




χ 


chi 




&#968 




ψ 


psi 


a) 


&#969 




ω 


omega 




&#977 




tohetasym; 


theta symbol 


Y 


&#978 




toipsih; 


upsilon symbol 




&#982 




ϖ 


pi symbol 



Other Entities Supported by HTML 



CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 


CE 


&#338 




Œ 


capital ligature OE 


oe 


&#339 




œ 


small ligature oe 


S 


&#352 




Š 


capital S with caron 


s 


&#353 




š 


small S with caron 


Y 


&#376 




Ÿ 


capital Y with 
diaeres 


/ 


ƒ 


&fhof, 


f with hook 




ˆ 


ˆ 


modifier letter 
circumflex accent 




˜ 


˜ 


small tilde 




  


  


en space 




  


  


em space 




  


tohinsp; 


thin space 




‌ 


‌ 


zero width non- 










joiner 
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CHARACTER 


ENTITY 
NUMBER 


ENTITY NAME 


DESCRIPTION 




&#8205 




&zwj, 




zero width joiner 




&#8206 




&lrm 




left-to-right mark 




&#8207 




&rlm 




right-to-left mark 


- 


&#8211 




– 


en dash 




&#8212 




— 


CIIl U-dall 


< 


&#8216 




odsquo; 


left single quota- 

llUll llldllv 




’ 


tosquo; 


right single quota- 

llUll illdlK 


> 


‚ 


‚ 


single low-9 quota- 

llUll llldllv 


« 


“ 


“ 


left double quota- 

LlUll llldllv 




” 


tadquo; 


lli^llL U.UUU1C quuLd- 

tion mark 




„ 


„ 


double low-9 quo- 
tation mark 


t 


&#8224 




† 


dagger 


t 


&#8225 




‡ 


double dagger 


• 


&#8226 




• 


bullet 




&#8230 




… 


horizontal ellipsis 


%0 


&#8240 




‰ 


per mille 


l 


&#8242 




′ 


minutes 


ft 


&#8243 




″ 


aCUUllU-d 




&#8249 




odsaquo; 


bllli^lC 1C1L dllbilC 

quotation 


> 


› 


tasaquo; 


single right angle 
quotation 


— 


&#8254 




‾ 


overline 


€ 


&#8364 




€ 


euro 


TM 


&#8482 




torade; 


trademark 




&#8592 




← 


left arrow 


T 


&#8593 




↑ 


up arrow 




&#8594 




→ 


right arrow 


i 


&#8595 




↓ 


down arrow 
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THAR ATTFR 

V^yl 1/YIV/YV> 1 J_,JV 


FNFTTTY 

J_/1M 1111 

NUMBER 


FNFTTTY NFAMF 

J_/1N 1111 IN /\1V1J_/ 


DF SPR TPTTONF 


<— >• 


↔ 


↔ 


left right arrow 




↵ 


↵ 


carriage return 
arrow 


r 


&#8968 




Sdceil; 


left ceiling 


1 


&#8969 




⌉ 


right ceiling 


L 


&#8970 




⌊ 


left floor 


j 


&#8971 




tofloor; 


right floor 


0 


&#9674 




◊ 


lozenge 




&#9824 




♠ 


spade 


* 


&#9827 




♣ 


club 




&#9829 




♥ 


heart 


♦ 


&#9830 




♦ 


diamond 
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HTML URL 
ENCODING 
REFERENCE 



URL encoding converts characters into a format that can be safely transmitted over 
the Internet. 

Web browsers request pages from Web servers by using a URL. The URL is the 
address of a Web page like: http://www.w3schools.com. 

For more information, see Chapter 27, "URL Encoding." 



URL Encoding 

URLs can only be sent over the Internet using the ASCII character set. 

Because URLs often contain characters outside the ASCII set, the URL has to 
be converted. URL encoding converts the URL into a valid ASCII format. URL 
encoding replaces unsafe ASCII characters with "%" followed by two hexadecimal 
digits corresponding to the character values in the ISO-8859-1 character set. 



NOTE 



URLs cannot contain spaces. URL encoding normally replaces a space 
with a + sign. 



t ^ > For more about ASCII, see Appendix F, "HTML ASCII Reference." 

For more about ISO characters, see Appendix G, "HTML ISO-8859-1 
Reference." 
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URL Encoding Functions 

In JavaScript, PHP, and ASP there are functions that can be used to URL encode 
a string. 

In JavaScript you can use the encodeURlO function. PHP has the rawurl en- 
code () function and ASP has the Server.URLEncodeQ function. 



ETo learn more about programming events, please read Learn JavaScript 
and Ajax with w3schools, also from Wiley Publishing, or visit the JavaS- 
cript tutorial at www.w3schools.com/js. 



In the following table, some numbers remain unassigned. 



URL Encoding Reference 













%21 




%22 


# 


%23 


$ 


%24 


% 


%25 


& 


%26 




%27 


( 


%28 


) 


%29 


* 


%2A 


+ 


%2B 




%2C 




%2D 




%2E 


/ 


%2F 


0 


%30 


1 


%31 


2 


%32 


3 


%33 
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ASCII CHARACTER 


URL-ENCODING 


4 


%34 


5 


%35 


6 


%36 


7 


%37 


8 


%38 


9 


%39 




%3A 


; 


%3B 


< 


%3C 


= 


%3D 


> 


%3E 


? 


%3F 


@ 


%40 


A 


%41 


B 


%42 


C 


%43 


D 


%44 


E 


%45 


F 


%46 


G 


%47 


H 


%48 


I 


%49 


J 


%4A 


K 


%4B 


L 


%4C 


M 


%4D 


N 


%4E 


O 


%4F 


P 


%50 


Q 


%51 


R 


%52 


S 


%53 


T 


%54 


U 


%55 
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ASCII CHARACTER 


URL-ENCODING 


V 


%56 


W 


%57 


X 


%58 


Y 


%59 


Z 


%5A 


[ 


%5B 


\ 


%5C 


] 


%5D 


A 


%5E 


_ 


%5F 


v 


%60 


a 


%61 


b 


%62 


c 


%63 


d 


%64 


e 


%65 


f 


%66 


g 


%67 


h 


%68 


i 


%69 


j 


%6A 


k 


%6B 


1 


%6C 


m 


%6D 


n 


%6E 


o 


%6F 


P 


%70 


q 


%71 


r 


%72 


s 


%73 


t 


%74 


u 


%75 


V 


%76 


w 


%77 
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ASCII CHARACTER 


URL-ENCODING 


X 


%78 


y 


%79 


z 


%7A 


{ 


%7B 


1 


%7C 


} 


%7D 


- 


%7E 




%7F 


€ 


%80 




%81 


> 


%82 


/ 


%83 




%84 




%85 


t 


%86 


t 


%87 


A 


%88 


%0 


%89 


s 


%8A 


< 


%8B 


CE 


%8C 




%8D 


Z 


%8E 




%8F 




%90 




%91 




%92 




%93 




%94 


• 


%95 




%96 




%97 




%98 


TM 


%99 
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ASCII CHARACTER 


URL-ENCODING 


s 


%9A 


> 


%9B 


oe 


%9C 




%9D 


z 


%9E 


Y 


%9F 




%A0 


i 


%A1 




%A2 


£ 


%A3 




%A4 


¥ 


%A5 


| 


%A6 


§ 


%A7 




%A8 


© 


%A9 


a 


%AA 


« 


%AB 




%AC 


- 


%AD 


® 


%AE 


- 


%AF 


o 


%B0 


± 


%B1 


2 


%B2 


3 


%B3 


' 


%B4 




%B5 


f 


%B6 




%B7 




%B8 


1 


%B9 


o 


%BA 


» 


%BB 
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ASCII CHARACTER 


URL-ENCODING 


V4 


%BC 


Vi 


%BD 


3 /4 


%BE 


I 


%BF 


A 


%C0 


A 


%C1 


A 


%C2 


A 


%C3 


A 


%C4 


A 


%C5 


JE 


%C6 


g 


%C7 


E 


%C8 


E 


%C9 


E 


%CA 


E 


%CB 


I 


%cc 


I 


%CD 


I 


%CE 


I 


%CF 


D 


%D0 


N 


%D1 


O 


%D2 


O 


%D3 


o 


%D4 


o 


%D5 


o 


%D6 




%D7 


0 


%D8 


u 


%D9 


u 


%DA 


u 


%DB 


u 


%DC 


Y 


%DD 
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ASCII CHARACTER 


URL-ENCODING 


I> 


%DE 


& 


%DF 


a 


%E0 


a 


%E1 


a 


%E2 


a 


%E3 


a 


%E4 


a 


%E5 


as 


%E6 




%E7 


e 


%E8 


e 


%E9 


e 


%EA 


e 


%EB 


1 


%EC 


{ 


%ED 


1 


%EE 


i 


%EF 


a 


%F0 


n 


%F1 


6 


%F2 


6 


%F3 


6 


%F4 


6 


%F5 


6 


%F6 


- 


%F7 


0 


%F8 


u 


%F9 


u 


%FA 


u 


%FB 


u 


%FC 


y 


%FD 


t> 


%FE 


y 


%FF 
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Symbols 

<!-...->, 177, 181 

A 

<a> element, 47 

<a> tag, 11, 17, 157, 177, 182, 189 
</a> tag, 13 

<abbr> tag, 38, 177, 181, 189 
abbreviations, formatting, 32 
accesskey attribute, 164, 186 
<acronym> tag, 38, 177, 181, 189 
acronyms, formatting, 32 
action attribute, 1 06 
<address> tag, 38, 177, 181, 189 
addresses, formatting, 31 
<a href="default.htm"> tag, 13 
align attribute, 12 
aligning images, 59-60 
alignment 

cell content, 82-83 

text, 43-44 
alt attribute, 63 

ampersand, character entity, 149 
anchors, links, 47, 49, 117 
<applet> tag, 162, 178, 184, 189 
<area> tag, 178, 182, 189 
ASCII characters, 193, 196-200 

device control characters, 199-200 

printable characters, 196-199 
attributes, 11-13, 17-18 

accesskey, 164, 186 

action, 106 

align, 40, 44, 82 

alt, 63 

bgcolor, 40-41 

border, 68, 70, 88-89 

class, 18, 163, 185 

color, 20 

<content>, 155 

core, 163, 185 

dir, 163, 186 

event, 165-166, 187-188 

fonts, 137 

frame, 84-89 

height, 62 



href, 157 
id, 18, 163, 185 
keyboard, 164, 186 
lang, 163, 186 
language, 163, 186 
lowercase, 18 
<name>, 155 
name/value pairs, 17 
onabort, 188 
onblur, 166, 187 
onchange, 166, 187 
onclick, 166, 188 
ondblclick, 166, 188 
onfocus, 166, 187 
onkeydown, 166, 188 
onkeypress, 166, 188 
onkeyup, 166, 188 
onload, 165, 187 
onmousedown, 166, 188 
onmousemove, 166, 188 
onmouseout, 166, 188 
onmouseover, 166, 188 
onmouseup, 166, 188 
onreset, 166, 187 
onselect, 166, 187 
onsubmit, 166, 187 
onunload, 165, 187 
quotation marks, 17 
src, 55 

standard, 17-18, 163-164, 185-186 

style, 18, 39-44, 143, 146, 163, 185 

tabindex, 164, 186 

tag reference, 22 

target, 46, 48 

title, 18, 163, 185 

type, 91, 93 

unknown, 155 

values, defining, 17-18 

width, 62 

B 

<b> tag, 36, 178, 181, 189 
background colors, 41-42 

cells, 82 

tables, 80-81 
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background images, 58 

cells, 82 

tables 80-81 
<base> tag, 150, 152-153, 178, 183, 189 
<basefont> tag, 40, 146, 178, 183, 189 
<bdo> tag, 38, 178, 181, 189 
<big> tag, 36, 178, 181 
<blockquote> tag, 38, 178, 181, 190 
<body> element, 14-15, 41 
</body> tag, 2,15 

<body> tag, 2, 15, 126, 178, 180, 190 
bold text, 20 

formatting, 27-28 
border attribute, 68, 70, 88-89 
borders 

frames, resizing, 128 

tables, 68-71, 84-89 
<br> element, 16, 24 
<br/> tag, 13, 24, 178, 181, 190 
brackets, 21 
browsers 

knowledge, 1 

older, 161 

support, colors, 113 
windows, links, 46 
bullets, 90-91 

<button> tag, 110, 178, 182, 190 
buttons, 104-105, 107-109 
buttons, radio, 102, 108-109 

c 

captions, tables, 74-75 
<caption> tag, 89, 178, 183, 190 
case sensitivity, 1 8 
cells, 75-76 

background colors, 82 

background images, 82 

content, alignment, 82-83 

empty, 72-74 

padding, 78-79 

spacing, 79-80 
cent, character entity, 149 
<center> tag, 40, 146, 178, 181, 190 
character entities, 147-149 
character sets, 193-195 

ASCII characters, 193 

ISO characters, 194-195 

ISO-8859-1 characters, 193 

Unicode characters, 195 
character widths, formatting, 29 



checkboxes, 101, 107-108 
citation tags, 38 

<cite> tag, 36, 38, 178, 181, 190 
class attribute, 18, 163, 185 
closing tags, 13, 16 
code, source, 22 

<code> tag, 36-37, 178, 181, 190 
<col> tag, 89, 178, 183, 190 
<colgroup> tag, 89, 178, 183, 190 
color 

background 41-42 

browser support, 113 

font, 42-43, 138-139 

gray shades, 114-115 

hexadecimal notation, 111-112 

names, standard, 113 

RGB, 111 

values, 111-112 

Web Safe Colors, 114 
Color Picker, 8 
column sizes, frameset, 128 
comments, 21 
computer output tags, 30 
<content> attribute, 155 
copyright, character entity, 149 
core attributes, 185 
CSS styles, 142-146 

<basefont> tag, 146 

<center> tag, 146 

<div> tag, 146 

external style sheet, 144 

<font> tag, 146 

<head> section, 142-143 

inline styles, 146 

internal style sheets, 145 

<link> tag, 144, 146 

links, underlined, 143 

<span> tag, 146 

style attribute, 143, 146 

style sheets, external, 144-145 

style sheets, internal, 145 

style sheets, linked, 144 

<style> tags, 145-146 

D 

<dd> tag, 95-96, 98, 178, 183, 190 
definition lists, 95-96, 118 
definition tags, 38 
<del> tag, 36, 178, 181, 190 
deleted text, 35 
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deprecated tags, 36, 40 

device control characters, ASCII, 199-200 

<dfn> tag, 36, 38, 178, 181, 190 

dir attribute, 163, 186 

<dir> tag, 98, 178, 183, 190 

<div> tag, 146, 178, 183, 190 

<dl> tag, 95, 98, 178, 183, 190 

doctypes, 189-192 

<!DOCTYPE> tag, 153, 177, 180 

documents, basic, 2, 116 

domain, URLs, 157 

downloading, ftp, 158 

Dreamweaver, 7 

drop-down lists, 102-103 

<dt> tag, 95, 98, 178, 183, 190 

E 

editors, 7 
elements, 13-16 

<address>, 119 

anchors, 117 

<blockquote>, 119 

<body>, 41 

doctypes, 189-192 

empty, 16 

end tags, 1 5 

forms, 99 

head element, 150-153 

<base> tag, 150, 152-153 

<!DOCTYPE> tag, 153 

<head> tag, 153 

<link> tag, 150, 153 

<meta> tag, 150, 153 

<p> element, 151 

<script> tag, 150 

< stylo tag, 150 

tags, 150-153 

<title> tag, 150-151, 153 
headings, 116 
image, 117 
links, 117 
lowercase tags, 16 
meta, 153-156 

<content> attribute, 155 

keywords, 154-155 

<name> attribute, 155 

search engines, 154-155 

unknown attributes, 155 

user redirection, 155-156 
nested, 14 



<p>, 42, 151 
<tbody>, 74 
<tfoot>, 74 
text, 116 
<thead>, 74 
syntax, 13 

within elements, 76-77 
<em> tag, 36, 178, 181, 190 
e-mail addresses, links, 52-53 
e-mails, forms, 109-110 
emphasized text, 28 
empty cells, 72-74 
empty elements, 16 
empty lines, 20, 23 
encoding, URLs, 167-168 
end tags, see also closing tags, 14-15, 23 
entities, 119 

euro, character entity, 149 

event attributes, 165-166, 187-188 

body events, 187 

form element events, 166, 187 

frameset events, 1 87 

image events, 188 

keyboard events, 166, 188 

mouse events, 166, 188 

window events, 165 
exclamation points, 21 
extensions, 8 
external links, 45-46 
external style sheet, 144 
extra lines, 24-26 
extra spaces, 24-26 

F 

families, fonts, 42-43 

<fieldset> tag, 110, 178, 182, 190 

fieldset, 105 

file extensions, 8 

file validation, 141 

filenames, URLs, 158 

floating images, 61 

fonts, 136-139 

attributes, 137 

color, 42-43, 138-139 

controlling, 137-139 

families, 42-43 

size, 42-43, 138-139 

styles, 137-139 

style sheets, 139 
<font> tag, 40, 136-139, 146, 178, 181, 190 
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form element events, 166 

<form> tag, 100, 110, 178, 182, 190 

formatting, text, 27-38 

abbreviations, 32 

addresses, 31 

acronyms, 32 

<b> tag, 27 

bold text, 27-28 

character widths, 29 

citation tags, 38 

computer output tags, 30 

definition tags, 38 

deleted text, 35 

deprecated tags, 36 

emphasized text, 28 

<i> tag, 27 

inserted text, 35 

italic text, 27-28 

line breaks, 29 

phrase tags, 36 

preformatted text, 29 

quotations, 34, 38 

spaces, 29 

strikethrough 35, 35 
subscript text, 28 
superscript text, 28 
tags, 27, 36 
text direction, 33 
underscore text, 35 
forms, 99-110, 118-119 
action attribute, 106 
<button> tag, 1 10 
buttons, 104-105, 107-109 
checkboxes, 101, 107-108 
drop-down lists, 102-103 
elements, 99 

e-mails, sending, 109-110 
<fieldset> tag, 105, 110 
<form> tag, 100, 110 
<input> tag, 100, 110 
<isindex> tag, 110 
<legend> tag, 1 10 
<optgroup> tag, 110 
<option> tag, 1 10 
pages, adding, 106-107 
radio buttons, 102, 108-109 
<select> tag, 110 
<textarea> tag, 1 10 
textarea input control, 1 04 
text areas, 104 



text fields, 100-101 
frame attribute, 84-89, 188 
frames, 125-135 

borders, resizing, 128 

column sizes, 128 

disadvantages, 125 

<frame> tag, 127-128, 135 

<frameset> tag, 125-127, 135 
horizontal frameset, 126-127 
vertical frameset, 125-126 

<iframe> tag, 135 

inline, 132-133 

jump to, 133-134 

jump to sections, 134-135 

mixed frameset, 130 

navigation, 131-132, 135 

<noframes> tag, 128-129, 135 

noresize attribute, 131 

sections, jumping to, 134-135 
<frame> tag, 127-128, 135, 179, 182, 190 
<frameset> tag, 125-127, 135, 190 

horizontal frameset, 126-127 

vertical frameset, 125-126 
FrontPage, 7 
fundamentals, 9-12 

headings, 9-10 

images, 11-12 

links, 11 

paragraphs, 10 

G 

gray shades, 114-115 

greater than, character entity, 149 

Greek symbols, 208-210 

H 

<hl> tag, 2, 9, 19, 179, 181, 190 
<h6> tag, 9, 19, 179, 181, 190 
head element, 150-153 

<base> tag, 150, 152-153 

<!DOCTYPE> tag, 153 

<head> tag, 153 

<link> tag, 150, 153 

<meta> tag, 150, 153 

<p> element, 151 

<script> tag, 150 

< stylo tag, 150 

tags, 150-153 

<title> tag, 150-151, 153 
<head> section, 142-143 
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<head> tag, 153, 179, 183, 190 
headings, 9-10, 19-20 

elements, 116 

tables, 71-72 
height attribute, 62 
hexadecimal notation, 111-112 
horizontal frameset, 126-127 
horizontal rules, 20 
host, URLs, 157 
href attribute, 47, 49, 157 
<hr/> tag, 20, 179, 181, 190 
HTM extension, 8 
HTML, defined, 1 
HTML 3.2, 140 
HTML 4.0, 140-141 
HTML Color Picker, 8 
HTML editors, 7 
<html> element, 15 
HTML extension, 8 
<html> tag, 2, 15, 179-180, 190 
hyperlinks, 47 

I 

<i> tag, 36, 179, 181, 190 
id attribute, 18, 163, 185 
<iframe> tag, 135, 179, 182, 190 
IIS, see Internet Information Server 
image maps, 63-64 
images, 11-12, 55-64, 117 

aligning, 59-60 

alt attribute, 63 

background, 58 

floating, 61 

height attribute, 62 

<img> tag, 55-56 

inserting, 57 

links, 54-55 

maps, 63-64 

scaling, 62 

src attribute, 55 

size, adjusting, 62 

width attribute, 62 
<img> tag, 11, 55-56, 179, 182, 190 
inline frames, 132-133 
inline styles, 146 

<input> tag, 100, 110, 179, 182, 190 
<ins> tag, 36, 179, 181, 190 
inserted images, 57 
inserted text, 35 
internal links, 45-46 



internal style sheets, 145 
Internet Explorer, 2 

Internet Information Server (IIS), 169-171 
<isindex> tag, 110, 179, 182 
ISO characters, 194-195 
ISO-8859-1 characters, 193, 201-206 

reserved characters, 201-202 

symbols, 202-203 
italic text, 27-28 

J 

jump to frameset, 133-134 
jump to sections, 134-135 

K 

<kbd> tag, 36-37, 179, 181, 191 
keyboard attributes, 186 
keyboard events, 166 
keywords, 154-155 

L 

<label> tag, 179, 182, 191 
language attribute, 163, 186 
layout, tables, 123-124 

<table> tag, 123 
<legend> tag, 110, 179, 182, 191 
less than, character entity, 149 
<li> tag, 91,93, 98, 179, 183, 191 
line breaks, 10, 24, 29 
lines, see rules 
lines 

empty, 20, 23 

extra, 24-26 
<link> tag, 144, 146, 150, 153, 179, 182, 191 
links, 11,45-54, 117 

<a> element, 47 

anchors, 47, 49 

browser windows, 46 

e-mail addresses, 52-53 

external, 45-46 

href attribute, 47, 49 

hyperlinks, 47 

images, 54-55 

internal, 45-46 

mailto:, 52-53 

name attribute, 49 

opening, 46 

same page, 50-51 

start tag, 47 

subfolder references, 49 
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syntax, 47 

target attribute, 46, 48 

underlined, 143 

URLs, 158-159 
<listing> tag, 37 
lists, 90-98 

bullets, 90-91 

<dd> tag, 95-96, 98 

definition, 95-96, 118 

<dir> tag, 98 

<dl> tag, 95, 98 

<dt> tag, 95, 98 

<li> tag, 91, 93, 98 

<menu> tag, 98 

nested, 96-98 

<ol> tag, 93, 98 

ordered, 93, 117 

type attribute, 91, 93 

<ul> tag, 91, 98 

unordered, 90-92, 117 
logical styles, 117 
lowercase attributes, 18 
lowercase tags, 16 

M 

mailto: links, 52-53 

maps, image, 63-64 

<map> tag, 179, 182, 191 

markup tags, 8 

math symbols, 207-208 

<menu> tag, 98, 179, 183, 191 

meta element, 153-156 
<content> attribute, 155 
keywords, 154-155 
<name> attribute, 155 
search engines, 154-155 
unknown attributes, 155 
user redirection, 155-156 

<meta> tag, 150, 153, 179, 183, 191 

mixed frameset, 130 

mouse events, 166 

Mozilla Firefox, 2, 72 

N 

name attribute, 49, 155 
names, standard, 113 
name/value pairs, 17 
navigation frame, 131-132, 135 
nested elements, 14 

<body> element, 14-15 



<html> element, 15 

<p> element, 14 
nested lists, 96-98 
newsgroups, accessing, 158 
<noframes> tag, 128-129, 135, 179, 182, 191 
nonbreaking spaces, 73, 148 
noresize attribute, frameset, 131 
<noscript> tag, 162, 179, 184, 191 
Notepad, 7-8 

<object> tag, 162, 179, 184, 191 
<ol> tag, 93, 98, 179, 182, 191 
onabort attribute, 188 
onblur attribute, 166, 187 
onchange attribute, 166, 187 
onclick attribute, 166, 188 
ondblclick attribute, 166, 188 
onfocus attribute, 166, 187 
onkeydown attribute, 166, 188 
onkeypress attribute, 166, 188 
onkeyup attribute, 166, 188 
onload attribute, 165, 187 
onmousedown attribute, 166, 188 
onmousemove attribute, 166, 188 
onmouseout attribute, 166, 188 
onmouseover attribute, 166, 188 
onmouseup attribute, 166, 188 
onreset attribute, 166, 187 
onselect attribute, 166, 187 
onsubmit attribute, 166, 187 
onunload attribute, 165, 187 
opening links, 46 
opening tags, 1 3 

<optgroup> tag, 110, 179, 182, 191 
<option> tag, 1 10, 179, 182, 191 
ordered, 93, 117 
output, paragraphs, 24-25 

p 

<p> element, 14, 42, 151 

<p> tag, 2, 13,23, 179, 181, 191 

padding, cells, 78-79 

page links, 50-51 

pages, adding to forms, 106-107 

pages, scripts, 160 

paragraphs, 10, 23-26 

end tags, 23 

line breaks, 24 

output, 24-25 
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<param> tag, 162, 179, 184, 191 
path, URLs, 158 

Personal Web Server (PWS), 170-172 

phrase tags, 36 

physical styles, 117 

<plaintext> tag, 37 

:port, URLs, 157 

pound, character entity, 149 

<pre> tag, 37, 179, 181, 191 

preformatted text, 29 

primes, 17 

printable characters, ASCII, 196-199 
professional Web servers, 172 
PWS, see Personal Web Server 



<q> tag, 38, 180-181, 191 
quizzes, 8 

quotation marks, attributes, 17 
quotations, formatting, 34, 38 

radio buttons, 102, 108-109 
registered trademark, character entity, 149 
reserved characters, ISO-8859-1, 201-202 
RGB, 111 
rules, 20-21 



<s> tag, 36, 40, 180-181, 191 
<samp> tag, 36-37, 180-181, 191 
scaling images, 62 
schemes, URLs, 157-158 
scripts, 160-162 

<applet> tag, 162 

browsers, 161 

<noscript> tag, 162 

<object> tag, 162 

pages, inserting, 160 

<param> tag, 162 

<script> tag, 160-162 

tags, 162 

<script> tag, 150, 160-162, 180, 184, 191 

search engines, 20, 154-155 

section, character entity, 149 

sections, jumping to, 134-135 

<select> tag, 110, 180, 182, 191 

size 

fonts, 42-43, 138-139 
images, 62 



<small> tag, 36, 180-181, 191 
slashes, subfolder references, 49 
source code, 22 
source names, 12 
source sizes, 12 
spaces, 10, 24-26, 29 
spacing, cells, 79-80 
<span> tag, 146, 180, 183, 191 
src attribute, 55 

standard attributes, 17-18, 185-186 

start tags, see also opening tags, 13-14, 47 

<strike> tag, 36, 40, 180-181, 191 

strikethrough text, 35, 35 

<strong> tag, 36, 180-181, 191 

style attribute, 18, 39-34, 143, 146, 163, 185 

styles, 39-44 

background color, 41-42 
CSS, 142-146 

<basefont> tag, 146 
<center> tag, 146 
<div> tag, 146 
external style sheet, 144 
<font> tag, 146 
<head> section, 142-143 
inline styles, 146 
internal style sheets, 145 
<link> tag, 144, 146 
links, underlined, 143 
<span> tag, 146 
style attribute, 143, 146 
style sheets, external, 144-145 
style sheets, internal, 145 
style sheets, linked, 144 
deprecated tags/ attributes, 40 
fonts, 137-139 
font color, 42-43, 138-139 
font family, 42-43 
font size, 42-43, 138-139 
logical, 117 
physical, 117 
style attribute, 39-44 
text alignment, 43-44 
style sheets, 139 
external, 144-145 
internal, 145 
linked, 144 
<style> tag, 145-146. 150, 180, 183, 191 
<sub> tag, 36, 180-181, 191 
<sup> tag, 36, 180-181, 191 
subfolder references, links, 49 
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subscript text, 28 
superscript text, 28 
symbol entities, 207-21 1 

Greek symbols, 208-210 

math symbols, 207-208 

miscellaneous, 210-211 
symbols, ISO-8859-1, 202-203 
syntax, elements, 13 

T 

tabindex attribute, 164, 186 
tables, 118 

align attribute, 82 
background colors, 80-8 1 
background images, 80-8 1 
border attribute, 68, 70, 88-89 
borders, 68-71, 84-89 
captions, 74-75 
<caption> tag, 89 
cells, 75-76 

background colors, 82 

background images, 82 

content, alignment, 82-83 

empty, 72-7 A 

padding, 78-79 

spacing, 79-80 
<col> tag, 89 
<colgroup> tag, 89 
creation, 65-68 

elements within elements, 76-77 
frame attribute, 84-89 
headings, 71-72 
layout, 123-124 
nonbreaking spaces, 73 
table data, 65 
<table> tag, 65-66, 89 
tags within, 76—77 
<tbody> element, 74 
<tbody> tag, 89 
<td> tag, 65-66, 89 
<tfoot> element, 74 
<tfoot> tag, 89 
<th> tag, 71, 89 
<thead> element, 74 
<thead> tag, 89 
<tr> tag, 65-66, 89 
table data, 65 

<table> tag, 65-66, 89, 123, 180, 183, 191 
tags, 177-180 

<!-...->, 177, 181 



<a>, 11, 17, 157, 177, 182, 189 
</a>, 13 

<abbr>, 38, 177, 181, 189 
<acronym>, 38, 177, 181, 189 
<address>, 38, 177, 181, 189 
<a href="default.htm">, 13 
<applet>, 162, 178, 184, 189 
<area>, 178, 182, 189 
<b>, 36, 178, 181, 189 
<base>, 150, 152-153, 178, 183, 189 
<basefont>, 40, 146, 178, 183, 189 
<bdo>, 38, 178, 181, 189 
<big>, 36, 178, 181 
<blockquote>, 38, 178, 181, 190 
</body>, 2, 15 

<body>, 2, 15, 126, 178, 180, 190 
<br/>, 13,24, 178, 181, 190 
<button>, 110, 178, 182, 190 
<caption>, 89, 178, 183, 190 
<center>, 40, 146, 178, 181, 190 
<cite>, 36, 38, 178, 181, 190 
closing, 13 

<code>, 36-37, 178, 181, 190 
<col>, 89, 178, 183, 190 
<colgroup>, 89, 178, 183, 190 
<dd>, 95-96, 98, 178, 183, 190 
defined, 2 

<del>, 36, 178, 181, 190 

<dfn>, 36, 38, 178, 181, 190 

<dir>, 98, 178, 183, 190 

<div>, 146, 178, 183, 190 

<dl>, 95, 98, 178, 183, 190 

<!DOCTYPE>, 153, 177, 180 

<dt>, 95, 98, 178, 183, 190 

<em>, 36, 178, 181, 190 

end, 14-15,23 

<fieldset>, 110, 178, 182, 190 

<font>, 40, 136-139, 146, 178, 181, 190 

<form>, 100, 110, 178, 182, 190 

formatting, 27, 36 

<frame>, 127-128, 135, 179, 182, 190 

<frameset>, 125-127, 135, 179, 182, 190 

<hl>, 2, 9, 19, 179, 181, 190 

<h6>, 9, 19, 179, 181, 190 

<head>, 153, 179, 183, 190 

head, 150-153 

<hr/>, 20, 179, 181, 190 

<html>, 2, 15, 179-180, 190 

<i>, 36, 179, 181, 190 

<iframe>, 135, 179, 182, 190 
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<img>, 11, 55-56, 179, 182, 190 

<input>, 100, 110, 179, 182, 190 

<ins>, 36, 179, 181, 190 

<isindex>, 110, 179, 182 

<kbd>, 36-37, 179, 181, 191 

<label>, 179, 182, 191 

<legend>, 110, 179, 182, 191 

<li>, 91, 93, 98, 179, 183, 191 

<link>, 144, 146, 150, 153, 179, 182, 191 

<listing>, 37 

lowercase, 16 

<map>, 179, 182, 191 

markup, 8 

<menu>, 98, 179, 183, 191 
<meta>, 150, 153, 179, 183, 191 
<noframes>, 128-129, 135, 179, 182, 191 
<noscript>, 162, 179, 184, 191 
<object>, 162, 179, 184, 191 
<ol>, 93, 98, 179, 182, 191 
opening, 13 

<optgroup>, 110, 179, 182, 191 
<option>, 110, 179, 182, 191 
<p>, 2, 13, 23, 179, 181, 191 
<param>, 162, 179, 184, 191 
<plaintext>, 37 
<pre>, 37, 179, 181, 191 
<q>, 38, 180-181, 191 
<s>, 36, 40, 180-181, 191 
<samp>, 36-37, 180-181, 191 
script, 162, 191 

<script>, 150, 160-162, 180, 184 
<select>, 110, 180, 182, 191 
<small>, 36, 180-181, 191 
<span>, 146, 180, 183, 191 
start, 13-14 

<strike>, 36, 40, 180-181, 191 

<strong>, 36, 180-181, 191 

<style>, 145-146. 150, 180, 183, 191 

<sub>, 36, 180-181, 191 

<sup>, 36, 180-181, 191 

<table>, 65-66, 89, 123, 180, 183, 191 

<tbody>, 89, 180, 183, 191 

<td>, 65-66, 89, 180, 183, 191 

<textarea>, 110, 180, 182 

<tfoot>, 89, 180, 183, 192 

<th>, 71, 89, 180, 183, 192 

<thead>, 89, 180, 183, 192 

<title>, 150-151, 153, 180, 183, 192 

<tr>, 65-66, 89, 180, 183, 192 

<tt>, 37, 180-181, 192 



<u>, 36, 40, 180, 182, 192 
<ul>, 91, 98, 180, 182, 192 
<var>, 36-37, 180, 182, 192 
within tables, 76-77 
<xmp>, 37, 180, 182 

target attribute, 46, 48 

<tbody> element, 74 

<tbody> tag, 89, 180, 183, 191 

<td> tag, 65-66, 89, 180, 183, 191 

test Web, 8 

testing, Web servers, 171 
<textarea> tag, 110, 180, 182 
text alignment, 43-44 
text areas, 104 
text direction, 33 
text elements, 1 16 
text fields, 100-101 
text formatting, 27-38 

abbreviations, 32 

addresses, 31 

acronyms, 32 

<b> tag, 27 

bold text, 27-28 

character widths, 29 

citation tags, 38 

computer output tags, 30 

definition tags, 38 

deleted text, 35 

deprecated tags, 36 

emphasized text, 28 

<i> tag, 27 

inserted text, 35 

italic text, 27-28 

line breaks, 29 

phrase tags, 36 

preformatted text, 29 

quotations, 34, 38 

spaces, 29 

strikethrough 35, 35 

subscript text, 28 

superscript text, 28 

tags, 27, 36 

text direction, 33 

underscore text, 35 
textarea input control, 104 
<tfoot> element, 74 
<tfoot> tag, 89, 180, 183, 192 
<th> tag, 71,89, 180, 183, 192 
<thead> element, 74 
<thead> tag, 89, 180, 183, 192 



title attribute, 18, 163, 185 

<title> tag, 150-151, 153, 180, 183, 192 

<tr> tag, 65-66, 89, 180, 183, 192 

<tt> tag, 37, 180-181, 192 

type attribute, 91, 93 

u 

<u> tag, 36, 40, 180, 182, 192 
<ul> tag, 91,98, 180, 182, 192 
underscore text, 35 
Unicode characters, 195 
uniform resource locator, see URLs 
unknown attributes, 155 
unordered lists, 90-92, 117 
URLs, 157-159 

<a> tag, 157 

domain, 157 

downloading, ftp, 158 

encoding, 167-168 

filename, 158 

host, 157 

href attribute, 1 57 

links, 158-159 

newsgroups, accessing, 158 

path, 158 

:port, 157 

schemes, 157-158 
user redirection, 155-156 

v 

validation, file, 141 
values 

attributes, 17-18 

colors, 111-112 
<var> tag, 36-37, 180, 182, 192 
version 4.0, 140-141 
vertical frameset, 125-126 
View Page Source (Firefox), 22 
View Source (Internet Explorer), 22 
visual breaks, 20 



w 

yen, character entity, 149 
W3C, 16, 18, 113, 156 
w3schools.com, 1 
Web Safe Colors, 114 
Web pages, 2 
Web servers, 7, 169-172 

Internet Information Server (IIS), 169-171 

Personal Web Server (PWS), 170-172 

professional, 172 

testing, 171 

Windows 7, IIS, 170-171 

Windows 95, PWS, 172 

Windows 98, PWS, 172 

Windows 2000, IIS, 171 

Windows NT, PWS, 172 

Windows support, 170 

Windows Vista, IIS, 170-171 

Windows XP, IIS, 171 
Web sites, 7 
width attribute, 62 
window events, 165 
Windows 7, IIS, 170-171 
Windows 95, PWS, 172 
Windows 98, PWS, 172 
Windows 2000, IIS, 171 
Windows NT, PWS, 172 
Windows support, 170 
Windows Vista, IIS, 170-171 
Windows XP, IIS, 171 
World Wide Web Consortium, see W3C 

x-z 

XML, 16 

<xmp> tag, 37, 180, 182 
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I There's no faster, easier way 
I to learn HTML and CSS 

If you 
way tc 
perfec 
you n< 



If you want to start creating Web pages right away, there's no better 
way to get started than by learning HTML and CSS. w3schools has 
perfected a straightforward tutorial approach that gives you what 
you need to know in manageable lessons, liberally supported with 
examples. Youll find that tried-and-true format in this book along 
with a detailed reference section that you will use again and again. 



You will learn: 

• Basics of HTML tags and how to get started 

• How to format text 

• HTML links, lists, tables, styles, and images 

• Layout, frames, and fonts 

• The advantages of HTML 4.0 

• HTML CSS styles 

• Meta elements, URLs, scripts, and attributes 



w3schools is a leading Web destination for learning key Web 
technologies online. Founded in 1999, it receives more than 
10 million unique visitors each month. w3schools tutorials are 
required reading in more than 100 high schools and universities. 

$29.99 US/$35.99 CAN 





